同一域名端口下，通过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/”
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
举报
腾讯云开发者
