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

Java架构师必看

发布于 2021-10-18 10:38:36

2.2K0

发布于 2021-10-18 10:38:36

文章被收录于专栏：Java架构师必看

情景介绍

　　服务器上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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js