Nginx 部署多个 VUE 项目（相同IP、相同端口、不同上下文路径）

一、场景描述

  在前后分离的项目开发中，前端项目开发人员对 vue 项目的打包一般都是采用默认根目录访问的。如果多个前端项目都采用根目录的方式访问，分别部署在不同的服务器或者同一个服务器的不同端口，那通过 Nginx 代理的方式还很好解决。但是如果必须在同一个 IP 相同端口下，通过访问的上下文路径来区分，那么就是一个比较棘手的问题。

  接下来的操作就是带领有以上困惑的开发人员来处理此类问题。

二、解决方案

1、前端项目配置

1. 修改 vue.config.js 配置文件的公共路径配置，修改为我们前端项目服务的名称，这里以 admin 为例

   

2. 修改 router 目录下的 index.js 文件，指定 Vue 项目的固定路由路径，这里还是以 admin 为例（当然也可以和 publicPath 不相同）

   

3. 将 Vue 项目打包成静态资源文件

   npm run build  
   

4. 将打包完成的 dist 文件夹重命名为任意合规的项目文件夹名称，这里以 admin-web 为例

5. 将 admin 文件夹传入到服务器的指定目录中

2、代理服务配置

• 整体配置文件信息如下

  server {
      # 自定义访问端口
      listen       8013;
      # 服务名称
      server_name  localhost;
  
      # 响应日志文件名称定义
      access_log  logs/admin-web.access.log  main;
  
      # 设置客户端最大请求体
      client_max_body_size 10m;
  
      # 设置路由变量转发
      location @router {
          rewrite ^.*$ /index.html last;
      }
  
      # admin 管理平台前端界面
      location /admin/ {
          # 前端打包后静态文件所在位置，可以和上下文路径不一致，注意 root 和 alias 的用法
          alias   /opt/java/frontend/admin-web/;
          # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
      	try_files $uri $uri/ @router;
          index  index.html index.htm;
      }
  
      # xxxx 管理平台前端界面
      location /xxxx/ {
          # 前端打包后静态文件所在位置，可以和上下文路径不一致，注意 root 和 alias 的用法
          alias   /opt/java/frontend/xxxx-web/;
          # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
  	    try_files $uri $uri/ @router;
          index  index.html index.htm;
      }
  
      #error_page  404              /404.html;
      error_page  404              /404.html;
      location = /404.html {
  	root   html;
      }
  
      # redirect server error pages to the static page /50x.html
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
  

• 重启 nginx 服务

  # 验证语法
  /usr/local/nginx/sbin/./nginx -t
  
  # 重启 Nginx 服务
  /usr/local/nginx/sbin/./nginx -s reload
  

• 前端访问示例

  http://127.0.0.1:8013/admin/#