如題，項目部署咱們都經歷過，這個過程也是十面埋坑。其實部署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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。