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

迈不过友情╰ 2022-09-08 06:00 246阅读 0赞

## 情景介绍 ##

服务器上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里添加下面一行，将打包生成的文件引入路径修正

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

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

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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         }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

重启nginx

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20220829/c0c3da1ffcc04b42938a1bbf54ac0be4.png