解決vue單頁面應用打包後相對路徑、絕對路徑相關問題
在專案開發過程中,在部署過程中,用到了反向代理,這就要求前端程式碼中不能使用絕對路徑。但是我們知道,一般情況下,通過webpack+vuecli預設打包後的HTML、css、js等檔案,使用的都是絕對路徑。下面可以舉幾個例子來看一下:
1、打包後的index.html檔案
2、打包後的css檔案
所以,如果在專案中需要使用相對路徑來獲取靜態的資原始檔,需要怎麼做呢?
1、修改webpack配置檔案中的assetsPublicPath,修改為如下圖所示。
修改配置後,進行打包發現,打包後的index.html檔案中,對css等檔案的呼叫,變成相對路徑。
但是同時我們也會的發現這樣修改後,導致打包後的css檔案中,圖片的路徑出現問題,如下所示,圖片路徑出錯導致圖片找不到。
所以仍需進一步修改配置,使其變成如下路徑:
.iradio_flat-yellow{background-image:url(../../static/img/[email protected]);
2、 處理圖片路徑問題
在webpack對ExtractTextPlugin外掛配置的地方,加入如下程式碼(具體值可能有變化,依據自身專案打包後文件路徑關係確定)
再次打包,發現問題解決!
補充知識:Vue-cli 2打包靜態資料夾static打包路徑報錯,開發中使用絕對路徑,打包後部署到二級目錄,絕對路徑沒用改變。
在開發中,如果使用絕對路徑在執行測試環境是沒用任何問題的
但是在打包後,路徑是回安裝原來寫的路徑完全不改變的搬過去。
那麼在部署在二級目錄下,讀取根目錄肯定會報錯
解決辦法:在開發中使用相對路徑
主要檔案
config->index.js
build->assetsPublicPath: '/二級目錄/'
最後的斜線很重要不能省略
static靜態檔案
build->utils.js exports.cssLoaders下的function generateLoaders if (options.extract) { return ExtractTextPlugin.extract({
裡面新增publicPath: '/二級目錄/'中間寫二級路徑地址,後面的也是斜線很重要,不能省略
以上這篇解決vue單頁面應用打包後相對路徑、絕對路徑相關問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。