一、背景
- 實(shí)現(xiàn)多個(gè)Vue子項(xiàng)目合并發(fā)布到同一個(gè)nginx
- 每個(gè)子項(xiàng)目一個(gè)目錄
二罩驻、現(xiàn)象
- 項(xiàng)目在開發(fā)環(huán)境中正常運(yùn)行
- 打包上傳到nginx根目錄的下一級(jí)穗酥，就會(huì)出現(xiàn)問題
三、解決
這個(gè)問題是由于Vue是從nginx的根目錄開始查找組件導(dǎo)致的。所以需要修改路由的查找起點(diǎn)迷扇。直接上代碼了
- 1百揭、重新指定路由的base url , base: process.env.BASE_URL, 其中 BASE_URL 是自定義的路徑. 下面是router目錄下的index.js 中的關(guān)鍵代碼：
const router = new VueRouter({
base: process.env.BASE_URL, // 注意這里的配置，BASE_URL會(huì)在后面定義
mode: "history",
routes
})
2蜓席、定義 BASE_URL
const path = require('path')
//1、-----------注意這里：BASE_URL 的值/bigs 被添加的環(huán)境變量 process.env 中
const BASE_URL = process.env.NODE_ENV === 'production'?'/bigs':'/'
const resolve = dir => {
return path.join(__dirname, dir)
}
module.exports = {
//2课锌、-------------------------------------------注意這里設(shè)置 publicPath
publicPath: BASE_URL,
chainWebpack: config => {
config.resolve.alias
.set('_c', resolve('src/components'))
},
}
至此厨内，打包后上傳到nginx的 /html/bigs 目錄即可 ，只能上傳到此目錄
