Vue|Vue 前端配置多级目录实践（基于Nginx配置方式） Vue前端配置多级目录实践（基

前情提要有阵子没更新博客了，因为快年结了工作比较多，这不，最近公司的对外演示环境出现问题这个活儿也落到了我的头上……
事情是这样的，原来演示环境有很多服务，每个服务都是对外单独开一个端口，比如 http://a.com.cn:8080、http://a.com.cn:8081 这种，通过外网域名端口映射到内网的服务器上。最近有个变化是 为了降低安全风险，公司决定启用https，并且对外演示环境只开设一个端口。
之前的样子：
【Vue|Vue 前端配置多级目录实践（基于Nginx配置方式）】
文章图片

现在想要的效果：

文章图片

看着应该会很好实现，只需要用个Nginx就可以了嘛~

文章图片

看着也没什么问题嘛，而现实狠狠地给我上了一课：
Vue 前端默认是以 / 下载资源文件的！哪怕我的html的确是从服务b返回的，但html到达用户浏览器后，获取静态资源请求仍是向http://a.com.cn:8080/ 发起的！

文章图片

解决思路想解决这个问题常见有两种方案：

修改 Vue 构建源码，使用自定义路径或./作为获取静态资源的基础路径
使用 Nginx 获取 Referer 请求头，根据请求头的目录转发到对应的服务

方案对比

方案1需要修改代理的所有前端服务，改动量虽然不是很大，除了修改还需要再次构建部署。
方案2只需要修改 Nginx

综合考虑现在演示环境的程序是由不同产品线提供的稳定版本，最好不对程序进行大的修改，最后选择了方案2。
方案2的配置方式

#演示环境Hellxz server { listen 8080; server_name a.com.cn; charset utf-8; location /b/ { proxy_passhttp://server-b/; }location / { #根据Referer区分静态资源来源 if ($http_referer ~ "/b/") { add_header referer-review $http_referer; #显示静态资源来源 proxy_pass http://server-b; # 转发到服务b，末尾不能加/ } proxy_passhttp://server-a/; #门户a } }upstream server-a { server192.168.0.1:8080; }upstream server-b { server192.168.0.1:8081; }

就这样了，虽然前端仍是向/发起请求，但请求已经转到了正确的服务上，添加的 referer-review 请求头可以清楚地看到前端静态资源是从哪级目录过来的。本文内容就这些了，如果文章内容有错误希望读者评论与我沟通，我们一起进步！
本文同步于本人博客园(hellxz.cnblogs.com) 与 CSDN(https://blog.csdn.net/u012586326)