当本地静态资源不存在时重定向至其他服务器

分类:Linux 评论: 0

新项目遇到一个问题, Vue.js 中引用的资源无法使用绝对路径进行引用,而静态文件已经拆分至 CDN 服务器进行分发,因此导致部分静态资源无法加载页面出错。

环境

出现此问题的根本原因是页面使用了主页和资源分离部署的方式,因为 Vue.js 项目的 index.html 写明了静态文件的引用关系,而上传此文件到 CDN 会导致缓存参数,导致更新文件和接口存在更新时延,而发生不兼容问题。

默认情况下前端页面默认引用 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 是一个虚拟指针,若是资源不存在会重定向到虚拟指针中的路径进行尝试。

附录

参考链接

回复