使用nginx同域名下部署多個vue項目并使用反向代理的方法
效果
目前有 2 個項目（project1, project2），還有一個 nginx 自帶的 index.html，我添加了對應的鏈接代碼（稍后粘貼出來），為了統(tǒng)一管理子項目的路由。
我期望實現(xiàn)下面的效果（假設 ip: localhost，port: 8080）：
http://localhost:8080/ 進入最外層的 index.html
http://localhost:8080/project1 進入項目一
http://localhost:8080/project2 進入項目二
廢話不多說，開始配置
Vue 的配置
本人使用的是 vue-cli2 搭建的項目，所以對應的需要修改一些 vue 的配置參數(shù)。
config 文件夾下的 index.js，因為是打包，所以我們需要在 build.assetsPublicPath 更改對應項目名，譬如
// 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"' // 這里待會與 nginx 配置對應
}
// project2
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"/api/pro2"' // 這里待會與 nginx 配置對應
}
[注意] 因為我在項目中使用到了 BASE_API 作為代理的前綴，如果你的不在這邊，你需要找到你自己的代理配置
因為每個人的 vue-router 文件配置不一樣，你需要找到你的 router 配置文件，內部修改為：
// 我采用了 history 模式，hash 模式我沒有測試，感覺應該是一樣的效果
// project1
export default new Router({
base: '/project1/', // 注意更改你子項目名，這個對應你的 build.assetsPublicPath
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: []
})
// project2
export default new Router({
base: '/project2/', // 注意更改你子項目名，這個對應你的 build.assetsPublicPath
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: []
})
[注意] 在 npm run build 可能會報錯：.tap(*) 之類的，那是因為打包中的 html-webpack-plugin 版本出現(xiàn)了問題，可以執(zhí)行下面的語句
# 這個版本就是你的 package.json 中的版本，只不過你需要重新再指定這個版本 $ npm i html-webpack-plugin@4.0.0-alpha -D
Nginx 的配置
首先我的目錄是這樣的，無關文件全部以 ... 展示
. ├─conf │ ├─... # 其他文件 │ └─nginx.conf │ ├─html # 只看這里，其他暫時我沒用到 │ ├─project1 │ │ └─static │ │ ├─css │ │ ├─fonts │ │ └─js │ │ ├─g │ │ └─V │ ├─project2 │ │ └─static │ │ ├─css │ │ ├─fonts │ │ └─js │ │ ├─g │ │ └─V │ ├─index.html │ └─50x.html └─... # 其他文件
[解釋] 我的 nginx 目錄就是原生的，內部包含了一個 html 文件夾，為了省事，我直接使用這個，當然你也可以指定其他的目錄，但是目前還請和我一樣的配置，后面可以自己定制化。
現(xiàn)在我們開始配置在 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_age
最后貼出我修改的 index.html 的代碼
因為我是追加的，所以直接貼出我追加的代碼，其他的采用 ...
... <p><em>Thank you for using nginx.</em></p> <!-- 為了展示位置 --> <!-- start: 追加--> <hr> <a href="/project1" rel="external nofollow" >項目一</a> | <a href="/project2" rel="external nofollow" >項目二</a> <!-- end: 追加--> </body> <!-- 為了展示位置 -->
最后的調試
所有的配置完成，我們就可以啟動 nginx 了，這個不會的請自行解決了。
啟動成功，我們在瀏覽器輸入 http://localhost:8080 我們就可以看到，
點擊項目一，我們可以看到鏈接變?yōu)?http://localhost:8080/project1
點擊項目二，鏈接變?yōu)?http://localhost:8080/project2，完全符合我們的期望，那就成功了。
[強行解釋一下玄學] 那天配置好了，一啟動就報錯，弄的我最后放棄了。但是第二天，準備在檢查下，一啟動竟然全好了，我都一臉懵逼?。?如果你也遇到和我一樣的問題，先放放，說不定隔天就好了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。
版權聲明：本站文章來源標注為YINGSOO的內容版權均為本站所有，歡迎引用、轉載，請保持原文完整并注明來源及原文鏈接。禁止復制或仿造本網(wǎng)站，禁止在非maisonbaluchon.cn所屬的服務器上建立鏡像，否則將依法追究法律責任。本站部分內容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學習參考，不代表本站立場，如有內容涉嫌侵權，請聯(lián)系alex-e#qq.com處理。
關注官方微信