同一域名端口下，通過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