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

前情提要

有阵子没更新博客了，因为快年结了工作比较多，这不，最近公司的对外演示环境出现问题这个活儿也落到了我的头上……

事情是这样的，原来演示环境有很多服务，每个服务都是对外单独开一个端口，比如 http://a.com.cn:8080、http://a.com.cn:8081 这种，通过外网域名端口映射到内网的服务器上。最近有个变化是 为了降低安全风险，公司决定启用https，并且对外演示环境只开设一个端口。

之前的样子：

现在想要的效果：

看着应该会很好实现，只需要用个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_pass  http://server-b/;
  }

  location / {
    #根据Referer区分静态资源来源
    if ($http_referer ~ "/b/") {
       add_header referer-review $http_referer; #显示静态资源来源
       proxy_pass http://server-b; # 转发到服务b，末尾不能加/
    }
    proxy_pass  http://server-a/; #门户a
  }
}

upstream server-a {
  server   192.168.0.1:8080;
}

upstream server-b {
  server   192.168.0.1:8081;
}

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

本文同步于本人博客园(hellxz.cnblogs.com) 与 CSDN(https://blog.csdn.net/u012586326)