单个nginx如何部署多个vue项目

对于开发的多个vue项目，最后都想直接打包发布到1个nginx中，我们该怎么去做呢？要想实现单个nginx部署多个vue项目，只需要如下几步即可。

前置说明

1、准备两个前端项目

这里Java潘老师准备了两个vue项目，项目名分别为web70和web90，web70对应的端口是70，web90对应的端口是90，往后端发送请求的api前缀都是dev-api，vue.config.js中部分配置如下：

 publicPath: '/',
 outputDir: 'dist',
 assetsDir: 'static',

然后分别执行打包指令npm run build，如果你有多环境配置则可能是npm run build:dev

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

2、准备两个后端项目

两个后端项目，分别接收的请求对应关系为：

web70->lcoalhost:7070/dev-api

web90->localhost:9090/dev-api

单个nginx如何部署多个vue项目步骤

接下来我们开始进行单个nginx部署以上两个vue项目，步骤如下：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

1、第一步：复制项目进html

首先在nginx的html目录中，新建两个名为web70和web90的文件夹，分别将这两个项目build后的dist目录中的代码拷贝进去，注意不包括dist目录本身。

2、第二步：配置nginx.conf核心配置文件

接下来我们针对nginx.conf的核心配置文件进行编辑，主要在http层级下，新增两个对于的server配置。www.panziye.com具体如下：

server {
		listen  70;
		server_name     localhost;
		location / {
			root   html/web70;
			index  index.html index.htm;
		}
		location /dev-api/ {
			proxy_pass http://localhost:7070;
		}
}
server {
		listen  90;
		server_name     localhost;
		location / {
			root   html/web90;
			index  index.html index.htm;
		}
		location /dev-api/ {
			proxy_pass http://localhost:9090;
		}
}

配置说明：nginx分别监听70端口和90端口，70端口对应的项目根目录设置为html/web70（如果你之前拷贝带上的dist目录，那么这里也要配置到dist目录），并将请求前缀为/dev-api的请求代理为后端请求，比如localhost:70/dev-api/login 代理为 localhost:7070/dev-api/login，这就自然而然请求到后端代码了。

[v_blue]这里需要注意下，如果你监听80端口，因为nginx.conf本身就默认有监听80的配置，Java潘老师提醒注意需要将其覆盖或修改。[/v_blue]