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

2023-03-09 04:48| 来源: 网络整理| 查看: 265

对于开发的多个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项目的内容。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章