這次帶給大家處理Vue專案編譯後部署在非網站根目錄方法詳解,處理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: './' // 未修改前的配置为 '/', }
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
,由於部署目錄未知,所以我們可以根據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設定是根目錄下的,即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
根據實際部署的網站目錄,修改一下就可以。個人感覺還可以透過nginx內建的指令去動態獲取,在下就不太清楚了。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是處理Vue專案編譯後部署在非網站根目錄方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!