NGiNX

新项目遇到一个问题， 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 是一个虚拟指针，若是资源不存在会重定向到虚拟指针中的路径进行尝试。

---

附录

参考链接

• Module ngx_http_core_module - NGINX Official
• 当静态资源不存在时重定向 - 内存溢出
• NGINX 资源重定向 - CNBLOGS
• NGINX 资源定向 CSS JS 路径问题 - ITeYe

本文由 柒 创作，采用 知识共享署名4.0 国际许可协议进行许可。
转载本站文章前请注明出处，文章作者保留所有权限。
最后编辑时间： 2019-07-13 11:57 AM