新项目遇到一个问题， Vue.js 中引用的资源无法使用绝对路径进行引用，而静态文件已经拆分至 CDN 服务器进行分发，因此导致部分静态资源无法加载页面出错。
环境
出现此问题的根本原因是页面使用了主页和资源分离部署的方式，因为 Vue.js 项目的 index.html 写明了静态文件的引用关系，而上传此文件到 CDN 会导致缓存参数，导致更新文件和接口存在更新时延，而发生不兼容问题。
- 服务器 A （前端页面）：
www.domain.com/index.html - 服务器 B （内容分发）：
static-ft.domain.com/static/manifest.css
默认情况下前端页面默认引用 www.domain.com/static/manifest.css 而此文件并不存在，因此需要将静态资源转发到 CDN 服务器。
尝试
在服务器 A 中添加（如果有负载均衡或者反向代理需要在负载均衡器/反代服务器中添加）以下内容。
location ^~ /static/
{
try_files $uri @ppios;
}
location @ppios
{
rewrite ^(.*)$ http://www.abc.com/$1;
}
小贴士：会判断整个 /static 路径下的文件，若是只对部分资源进行重定向可以使用 location ~/*/*\(css|js)$，@ppios 是一个虚拟指针，若是资源不存在会重定向到虚拟指针中的路径进行尝试。
附录
参考链接
本文撰写于一年前，如出现图片失效或有任何问题，请在下方留言。博主看到后将及时修正，谢谢！
本文由 柒 创作，采用 知识共享署名4.0 国际许可协议进行许可。
转载本站文章前请注明出处，文章作者保留所有权限。
最后编辑时间：
当前已关闭评论