同一域名端口下，通过nginx部署多个vue项目

情景介绍

　　服务器上80端口已部署一套vue项目，现在乃至未来还可能要部署n个前端项目，而已部署的项目的nginx的配置不能修改

项目配置

　　假设需要部署的第二个vue项目是放在服务器的  “project” 目录下

　　打包环境：

　　　　　1、os：Windows10

　　　　　2、node: v12.19.0

　　　　　3、vue-cli3

　　　　　4、vue:2.3.10

       第一步   将vue.config.js里的 publicPath 设置为‘'/project/'

　　　　

publicPath: '/project/'

　　第二步  将路由的base也设置为 “/project/”

　　

const createRouter = () => new Router({
  mode: 'history',
  base:'/project/',
  routes: routes
})

第三步 　在模板文件index.html的head里添加下面一行，将打包生成的文件引入路径修正

<meta base=/project-web/ >

至此，vue项目内部设置已完成，打包将项目放到服务器的“project”目录下

第4步  nginx配置，接口的代理转发就不多说，正常配置就好了

     #第一个项目的配置
     location / {
            root   /usr/local/web/example/;
            index  index.html index.htm;
        try_files $uri $uri/ @router;
        }
   　#第二个项目的配置 
    location /project {
            root   /usr/local/web;
            index  index.html index.htm;
            try_files $uri $uri/ /project/index.html;
        }
    location @router {
            rewrite ^.*$ /index.html last;
        }

重启nginx