同一個生產(chǎn)部署項目，基內(nèi)外網(wǎng)的訪問路徑并不相同，內(nèi)網(wǎng)是基于域名根目錄來訪問，而外網(wǎng)卻指向了一個子目錄。

eg. ：

vue-router: history模式 內(nèi)網(wǎng)環(huán)境：192.168.1.1:8080/index.html 外網(wǎng)環(huán)境：domain.com/ttsd/index.html

由于開發(fā)出來的項目是要部署在客戶方，且客戶并不想單獨拿一個域名（或子域）來部署，這時，打包后的程序就要作一些配置方面的修改了。

修改配置文件

1、把打包后的資源引用修改為相對路徑 找到 config/index.js 中 build 屬性下的 assetsPublicPath

build: { ... assetsPublicPath: './' // 未修改前的配置為 '/'，}

2、修改樣式引用的資源文件（圖片、視頻、字體文件等）為相對路徑 找到 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 ，由于部署目錄未知，所以我們可以根據(jù) location.pathname 來獲取到當前訪問的文件路徑，來修改路由。

vue-router里提供了一個base的屬性

base類型: string 默認值: "/" 應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/" 。

修改路由代碼

function getAbsolutePath () { let path = location.pathname return path.substring(0, path.lastIndexOf('/') + 1)}const routers = new Router({ mode: 'history', base: getAbsolutePath(), ...})

至此，打包配置的相關修改已全部完成，項目也能夠正常訪問。 但還是會有一個問題，跳轉(zhuǎn)到某個路由后，刷新頁面，就gg了，頁面為空白，此時就要修改nginx的配置了。

修改nginx的配置

官方給的nginx配置是根目錄下的，即 https://router.vuejs.org/zh-cn/essentials/history-mode.html#nginx

location / { try_files $uri $uri/ /index.html; // 需要修改為 try_files $uri $uri/ /dist/index.html;}

注： /dist 根據(jù)實際部署的網(wǎng)站目錄，修改一下就可以。 個人感覺還可以通過nginx內(nèi)置的指令去動態(tài)獲取，在下就不太清楚了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。