Vue專案編譯後部署在非網站根目錄的解決方案

xiter發表於2018-04-25
Vue編譯網站

背景

同一個生產部署專案，基內外網的訪問路徑並不相同，內網是基於域名根目錄來訪問，而外網卻指向了一個子目錄。

eg. ：

vue-router: history模式 內網環境：192.168.1.1:8080/index.html 外網環境：domain.com/ttsd/index.html

由於開發出來的專案是要部署在客戶方，且客戶並不想單獨拿一個域名（或子域）來部署，這時，打包後的程式就要作一些配置方面的修改了。

修改配置檔案

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

build: {
    ...
    assetsPublicPath: './'  // 未修改前的配置為 '/'，
}
複製程式碼

clipboard.png
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)
}
複製程式碼

clipboard.png

修改路由

在路由的history模式下，所有的路由都是基於根路徑的，如/xxxx，由於部署目錄未知，所以我們可以根據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(),
  ...
})
複製程式碼

至此，打包配置的相關修改已全部完成，專案也能夠正常訪問。 但還是會有一個問題，跳轉到某個路由後，重新整理頁面，就gg了，頁面為空白，此時就要修改nginx的配置了。

修改nginx的配置

官方給的nginx配置是根目錄下的，即router.vuejs.org/zh-cn/essen…

location / {
  try_files $uri $uri/ /index.html;

  // 需要修改為
  try_files $uri $uri/ /dist/index.html;
}
複製程式碼

注：/dist 根據實際部署的網站目錄，修改一下就可以。 個人感覺還可以通過nginx內建的指令去動態獲取，在下就不太清楚了。

完

參考文章： vue+webpack+nginx 部署在伺服器非根目錄下訪問404問題

vue-cli webpack模板專案搭建以及打包時路徑問題的解答

相關文章