同一個生產部署項目,基內外網的訪問路徑並不相同,內網是基於域名根目錄來訪問,而外網卻指向了一個子目錄。javascript
eg. :html
vue-router: history模式 內網環境:192.168.1.1:8080/index.html 外網環境:domain.com/ttsd/index.htmlvue
因爲開發出來的項目是要部署在客戶方,且客戶並不想單獨拿一個域名(或子域)來部署,這時,打包後的程序就要做一些配置方面的修改了。java
一、把打包後的資源引用修改成相對路徑 找到config/index.js
中build
屬性下的 assetsPublicPath
webpack
build: {
...
assetsPublicPath: './' // 未修改前的配置爲 '/',
}
複製代碼
build/utils.js
中,添加(或修改)
publicPath
爲
'../../'
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 修改路徑
})
} else {
return ['vue-style-loader'].concat(loaders)
}
複製代碼
在路由的history模式下,全部的路由都是基於根路徑的,如/xxxx
,因爲部署目錄未知,因此咱們能夠根據location.pathname
來獲取到當前訪問的文件路徑,來修改路由。nginx
vue-router裏提供了一個base的屬性web
base 類型:
string
默認值:"/"
應用的基路徑。例如,若是整個單頁應用服務在/app/
下,而後base
就應該設爲"/app/"
。vue-router
修改路由代碼vue-cli
function getAbsolutePath () {
let path = location.pathname
return path.substring(0, path.lastIndexOf('/') + 1)
}
const routers = new Router({
mode: 'history',
base: getAbsolutePath(),
...
})
複製代碼
至此,打包配置的相關修改已所有完成,項目也可以正常訪問。 但仍是會有一個問題,跳轉到某個路由後,刷新頁面,就gg了,頁面爲空白,此時就要修改nginx的配置了。api
官方給的nginx配置是根目錄下的,即router.vuejs.org/zh-cn/essen…
location / {
try_files $uri $uri/ /index.html;
// 須要修改成
try_files $uri $uri/ /dist/index.html;
}
複製代碼
注:/dist
根據實際部署的網站目錄,修改一下就能夠。 我的感受還能夠經過nginx內置的指令去動態獲取,在下就不太清楚了。