如题，项目部署咱们都经历过，这个过程也是十面埋坑。其实部署vue应用比较简单了如今，特别是cli3出来后，比之前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来作代理很好用，能够解决跨域问题。html
那么，如何在一个端口号下部署多个应用呢？这个需求有什么用？好比你的一个服务器上部署了不少应用，各个项目的，每一个都占用一个端口，那可能如今还要映射到外网去，方便给客户演示。这个资源老是有限的，因此若是能省一个端口最好就省一个。特别是像一个项目里有多个子系统，各系统又是独立开发的，这种状况就更有必要了。前端
开发及部署环境
工具包括vue+vuecli3+nginxvue
部署步骤
1、前端配置
其实这个顺序应该是从nginx讲起，若是没经验的能够先看第二步nginx配置node
前端配置其实就是为了约定一个路由，这样在nginx配置好了以后能够访问到本身的资源。nginx
能够这么想，本来我一个端口下只有一个项目，那个人资源就跟我开发时同样就好了，随便访问。如今这个端口下多了一个项目，那我访问资源时是否是得区别标记一下，这个区分要先后端约定好才行。web
vue的前端路由其实就是在前端匹配url地址变化来找到想要的页面，那咱们如今要在服务器上加上一个项目，咱们把新项目的url进行一些特定配置就行了。所谓配置，就是加一个url路径'/newProject/'(你本身定义）就能够了。vuex
一、静态资源地址配置
这里要分vuecli2和vuecli3两种环境，只讲vuecli3的，与vuecli2不一样的地方我提下位置你就能够本身找了。后端
在vue.config.js文件下找到publicPath配置，添加以下配置（vuecli2就是config文件夹下的assetsPublicPath配置）api
process.env.NODE_ENV === 'production' ? '/newProject/' : '/',
这个配置在官方文档上有说明，就是要注意区分开发环境与生产部署环境。生产环境上咱们跑起项目时是不须要在url上加上这个newProject的，加上这个，是由于后面部署的时候nginx会根据这个来区分不一样的项目。跨域
二、在模板文件下添加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>
三、将'/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 /b'这两块就是我说的两个应用，大概意思就是这两个应用要共用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/ /b/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后面的内容也不同，本身注意看，我不细说了。
下面我讲一下nginx配置基础知识。
敲黑板，划重点
一、root、alias
root与alias主要做用就是解释location后面的uri，root意思就是根据root路径+locationn路径找到资源；alias意思就是用alias路径替换对应的location路径内容。
二、try_files uri/
可能不懂nginx的人有点懵，有人会问try_files uri/ @router; 这句话是什么意思？我简单解释下：
try_files字面意思就是尝试文件，再结合语境就是“尝试读取文件”，这里就是要读取静态文件
$uri 这个是nginx的一个变量，存放着用户访问的地址,
好比：http://www.aa.com/index.html, 那么$uri就是 /index.html
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项目已经讲完了，但愿对你有用，也能够点个在看，帮助更多人。
本文分享自微信公众号 - 字节逆旅（wvivw_007）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。