多个vue项目如何用nginx部署在同一端口下
如题，项目部署我们都经历过，这个过程也是十面埋坑。其实部署vue应用比较简单了现在，特别是cli3出来后，比以前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来做代理很好用，可以解决跨域问题。那么，如何在一个端口号下部署多个应用呢？这个需求有什么用？比如你的一个服务器上部署了很多应用，各个项目的，每个都占用一个端口，那可能现在还要映射到外网去，方便给客户演示。
如题，项目部署我们都经历过，这个过程也是十面埋坑。其实部署vue应用比较简单了现在，特别是cli3出来后，比以前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来做代理很好用，可以解决跨域问题。
那么，如何在一个端口号下部署多个应用呢？这个需求有什么用？比如你的一个服务器上部署了很多应用，各个项目的，每个都占用一个端口，那可能现在还要映射到外网去，方便给客户演示。这个资源总是有限的，所以如果能省一个端口最好就省一个。特别是像一个项目里有多个子系统，各系统又是独立开发的，这种情况就更有必要了。
开发及部署环境
工具包括vue+vuecli3+nginx
部署步骤
1、前端配置
其实这个顺序应该是从nginx讲起，如果没经验的可以先看第二步nginx配置
前端配置其实就是为了约定一个路由，这样在nginx配置好了之后可以访问到自己的资源。
可以这么想，原本我一个端口下只有一个项目，那我的资源就跟我开发时一样就行了，随便访问。现在这个端口下多了一个项目，那我访问资源时是不是得区别标记一下，这个区分要前后端约定好才行。
vue的前端路由其实就是在前端匹配url地址变化来找到想要的页面，那我们现在要在服务器上加上一个项目，我们把新项目的url进行一些特定配置就好了。所谓配置，就是加一个url路径’/newProject/’(你自己定义）就可以了。
1、静态资源地址配置
这里要分vuecli2和vuecli3两种环境，只讲vuecli3的，与vuecli2不同的地方我提下位置你就可以自己找了。
在vue.config.js文件下找到publicPath配置，添加如下配置（vuecli2就是config文件夹下的assetsPublicPath配置）
process.env.NODE_ENV === 'production' ? '/newProject/' : '/',
这个配置在官方文档上有说明，就是要注意区分开发环境与生产部署环境。生产环境上我们跑起项目时是不需要在url上加上这个newProject的，加上这个，是因为后面部署的时候nginx会根据这个来区分不同的项目。
2、在模板文件下添加base
在部署环境下， a、img、link、form这些标签要找到对应资源，也要先匹配nginx环境，所以要在head节点下加上base配置。
<meta base=/newProject/ >
base标签为页面上的所有链接规定默认地址或默认目标。
打包之后，你的html页面看起来就是这样：
<!DOCTYPE html>
<html>
<head>
<script src="/newProject/js/runtime~index.0604ac2d.js"></script>
<meta charset="utf-8">
<meta base="/newProject/">
<meta http-equiv="X-UA-Compatible" content="IE=edge,edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="icon" href="/newProject/images/favicon.ico">
<script src="/newProject/xxx.js"></script>
<title></title>
</head>
3、将’/newProject/'应用到vue项目路由中
这一步就是将vue项目中的页面路由切换加上这个添加的url路径，在router的初始化步骤下添加：
const router = new VueRouter({
mode: 'history',
base: process.env.NODE_ENV === 'production' ? '/newProject/index/' : '/index/',
routes
})
如果你的项目单页面服务在/index/下，一般默认情况下vuex的基路径base配置默认是’/index/’。这里的配置同样是根据环境来区分，部署环境同样要加上’/newProject’。
2、nginx配置
这个没写步骤，直接看完整配置吧。‘location /’ 和’location /newProject’这两块就是我说的两个应用，大概意思就是这两个应用要共用20000这个端口（'location ^~ /api/ '这个是接口api映射配置点，本文不讨论，你可以忽略）。
server {
listen 20000;
server_name localhost;
# root D:/deploy/web
location ^~ /api/ {
proxy_pass http://ip:端口/;
}
location / {
root D:/deploy/web/a;
try_files $uri $uri/ @router;
index index.html;
}
location /newProject {
alias D:/deploy/web/newProject;
try_files $uri $uri/ /newProject/index.html;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
配置基本就是这样，可以结合自己项目参考下，直接copy修改下就行。
我简单介绍下要点：
a、D:/deploy/web下的a、newProject项目分别在不同的文件夹里，它们所在位置不重要，重要的是nginx可以找到并且发布出来。
b、a文件夹的地址前缀是root，newProject文件夹的地址前缀是alias。
c、try_files后面的内容也不一样，自己注意看，我不细说了。
敲黑板，划重点
1、root、alias
root与alias主要作用就是解释location后面的uri，root意思就是根据root路径+locationn路径找到资源；alias意思就是用alias路径替换对应的location路径内容。
2、try_files $uri $uri/
可能不懂nginx的人有点懵，有人会问try_files $uri $uri/ @router; 这句话是什么意思？我简单解释下：
try_files字面意思就是尝试文件，再结合语境就是“尝试读取文件”，这里就是要读取静态文件
$uri 这个是nginx的一个变量，存放着用户访问的地址,
比如：http://www.aa.com/index.html, 那么$uri就是 /index.html
u r i / 表 示 u r l 的 目 录 ， 比 如 ： h t t p : / / w w w . a a . c o m / n g i n x / t e s t / ， 那 么 uri/ 表示url的目录，比如：http://www.aa.com/nginx/test/ ，那么 uri/表示url的目录，比如：http://www.aa.com/nginx/test/，那么uri/就是 /nginx/test/
完整的解释就是：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回当前值；如果第一个不存在继续读取第二个变量，如果存在，返回当前值；如果不存在就跳转到第三个参数上。
现在来看看第三个参数：@router，这个参数叫location，配置的是rewrite，重写规则。比如上面的rewrite ^.*$ /index.html last; ，这句意思就是一个重定向。比如你是这个地址http://www.baidu.com/xxx.html，它会跳转到http://www.baidu.com/index.html/xxx.html
好了，在nginx下配置多个vue项目已经讲完了，希望对你有用。
更多技术原创请关注我的公众号 字节逆旅
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)