這篇文章主要介紹軟件使用nginx同域名下部署多個(gè)vue項(xiàng)目并使用反向代理，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都濕噴機(jī)小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供成都企業(yè)網(wǎng)站定制營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
效果
目前有 2 個(gè)項(xiàng)目（project1, project2），還有一個(gè) nginx 自帶的 index.html，我添加了對(duì)應(yīng)的鏈接代碼（稍后粘貼出來(lái)），為了統(tǒng)一管理子項(xiàng)目的路由。
我期望實(shí)現(xiàn)下面的效果（假設(shè) ip: localhost，port: 8080）：
http://localhost:8080/ 進(jìn)入最外層的 index.html
http://localhost:8080/project1 進(jìn)入項(xiàng)目一
http://localhost:8080/project2 進(jìn)入項(xiàng)目二
開(kāi)始配置
Vue 的配置
本人使用的是 vue-cli2 搭建的項(xiàng)目，所以對(duì)應(yīng)的需要修改一些 vue 的配置參數(shù)。
config 文件夾下的 index.js，因?yàn)槭谴虬?，所以我們需要?build.assetsPublicPath 更改對(duì)應(yīng)項(xiàng)目名，譬如
重慶分公司
重慶分公司
// project1
module.exports = {
dev: {},
build: {
assetsPublicPath: '/project1/' // 注意前后的 ‘/'
}
}
// project2
module.exports = {
dev: {},
build: {
assetsPublicPath: '/project2/' // 注意前后的 ‘/'
}
}config 文件夾下的 prod.env.js 修改成這樣：
// project1
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"/api/pro1"' // 這里待會(huì)與 nginx 配置對(duì)應(yīng)
}
// project2
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"/api/pro2"' // 這里待會(huì)與 nginx 配置對(duì)應(yīng)
}[注意] 因?yàn)槲以陧?xiàng)目中使用到了 BASE_API 作為代理的前綴，如果你的不在這邊，你需要找到你自己的代理配置
因?yàn)槊總€(gè)人的 vue-router 文件配置不一樣，你需要找到你的 router 配置文件，內(nèi)部修改為：
// 我采用了 history 模式，hash 模式我沒(méi)有測(cè)試，感覺(jué)應(yīng)該是一樣的效果
// project1
export default new Router({
base: '/project1/', // 注意更改你子項(xiàng)目名，這個(gè)對(duì)應(yīng)你的 build.assetsPublicPath
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: []
})
// project2
export default new Router({
base: '/project2/', // 注意更改你子項(xiàng)目名，這個(gè)對(duì)應(yīng)你的 build.assetsPublicPath
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: []
})[注意] 在 npm run build 可能會(huì)報(bào)錯(cuò)：.tap(*) 之類(lèi)的，那是因?yàn)榇虬械?html-webpack-plugin 版本出現(xiàn)了問(wèn)題，可以執(zhí)行下面的語(yǔ)句
# 這個(gè)版本就是你的 package.json 中的版本，只不過(guò)你需要重新再指定這個(gè)版本 $ npm i html-webpack-plugin@4.0.0-alpha -D
Nginx 的配置
首先我的目錄是這樣的，無(wú)關(guān)文件全部以 ... 展示
. ├─conf │ ├─... # 其他文件 │ └─nginx.conf │ ├─html # 只看這里，其他暫時(shí)我沒(méi)用到 │ ├─project1 │ │ └─static │ │ ├─css │ │ ├─fonts │ │ └─js │ │ ├─g │ │ └─V │ ├─project2 │ │ └─static │ │ ├─css │ │ ├─fonts │ │ └─js │ │ ├─g │ │ └─V │ ├─index.html │ └─50x.html └─... # 其他文件
[解釋] 我的 nginx 目錄就是原生的，內(nèi)部包含了一個(gè) html 文件夾，為了省事，我直接使用這個(gè)，當(dāng)然你也可以指定其他的目錄，但是目前還請(qǐng)和我一樣的配置，后面可以自己定制化。
現(xiàn)在我們開(kāi)始配置在 conf 文件夾下的 nginx.conf 文件
我是直接在原始文件上修改的，而修改的配置都是在 http 模塊中，所以其他的不需要的代碼我直接用 ... 代替。
# ...
# 反向代理
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
sendfile on;
keepalive_timeout 65;
client_max_body_size 20M;
client_body_buffer_size 10M;
large_client_header_buffers 4 128k;
# 這里可以做集群
upstream p1_server {
server localhost:8081;
}
# 這里可以做集群
upstream p2_server {
server localhost:8082;
}
server {
listen 8080;
server_name localhost;
charset utf-8;
proxy_connect_timeout 180;
proxy_send_timeout 180;
proxy_read_timeout 180;
proxy_set_header Host $host;
proxy_set_header X-Forwarder-For $remote_addr;
root html; # 這里指定剛剛我們的文件夾
# 總的項(xiàng)目路由，我偷懶直接寫(xiě)在了同一個(gè)文件
# 如果有很多可以在配置多個(gè) conf 文件，使用 include 關(guān)聯(lián)進(jìn)來(lái)
location / {
try_files $uri $uri/ /index.html; # 這里可以理解指定到 html 文件夾下的 index.html
}
# project1
# 這里就是剛剛我們?cè)?nbsp;vue 項(xiàng)目中 config/index.js 的配置 build.assetsPublicPath，
# 也是 vue 項(xiàng)目中配置的 router 中的 base
location ^~ /project1 {
try_files $uri $uri/ /project1/index.html; # 這里可以理解指定到 html 文件夾下 project1 文件夾 的 index.html
}
# project2
# 這里是項(xiàng)目二的配置
location ^~ /project2 { #
try_files $uri $uri/ /project2/index.html; # 這里可以理解指定到 html 文件夾下 project2 文件夾 的 index.html
}
# 這里是 project1 配置需要調(diào)用的接口
location /api/pro1 { # 這里就是在 vue 項(xiàng)目中 prod.env.js 的配置 BASE_API
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://p1_server; # 此處的 p1_server 對(duì)應(yīng)的上面的配置 upstream p1_server {}，這里可以做集群，我用不到，就簡(jiǎn)單配置了
}
# 這里是 project1 配置需要調(diào)用的接口
location /api/pro2 { # 這里就是在 vue 項(xiàng)目中 prod.env.js 的配置 BASE_API
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://p2_server; # 此處的 p2_server 對(duì)應(yīng)的上面的配置 upstream p2_server {}，這里可以做集群，我用不到，就簡(jiǎn)單配置了
}
# ...
}
# ...
}最后貼出我修改的 index.html 的代碼
因?yàn)槲沂亲芳拥?，所以直接貼出我追加的代碼，其他的采用 ...
