情景介绍
服务器上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/”
1 const createRouter = () => new Router({
2 mode: 'history',
3 base:'/project/',
4 routes: routes
5 })
第三步 在模板文件index.html的head里添加下面一行，将打包生成的文件引入路径修正
<meta base=/project-web/ >
至此，vue项目内部设置已完成，打包将项目放到服务器的“project”目录下
第4步 nginx配置，接口的代理转发就不多说，正常配置就好了
1 #第一个项目的配置
2 location / {
3 root /usr/local/web/example/;
4 index index.html index.htm;
5 try_files $uri $uri/ @router;
6 }
7 #第二个项目的配置
8 location /project {
9 root /usr/local/web;
10 index index.html index.htm;
11 try_files $uri $uri/ /project/index.html;
12 }
13 location @router {
14 rewrite ^.*$ /index.html last;
15 }
重启nginx
