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

文
章
目
录

• 前置说明
• 1、准备两个前端项目
• 2、准备两个后端项目
• 单个nginx如何部署多个vue项目步骤
• 1、第一步：复制项目进html
• 2、第二步：配置nginx.conf核心配置文件
•  第三步：启动访问

对于开发的多个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

2、准备两个后端项目

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

web70->lcoalhost:7070/dev-api

web90->localhost:9090/dev-api

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

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

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，这就自然而然请求到后端代码了。

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

 第三步：启动访问

配置好后，启动nginx，然后访问localhost:70和localhost:90就能正常访问web70和web90项目了，是不是非常简单？

以上就是Java潘老师介绍的单个nginx如何部署多个vue项目的内容。