解決vue-cli webpack打包后加載資源的路徑問(wèn)題
vue項(xiàng)目，訪問(wèn)打包后的項(xiàng)目，輸入路徑后，頁(yè)面加載空白。這時(shí)會(huì)有兩類(lèi)問(wèn)題，都是路徑問(wèn)題。
1.一個(gè)是css,js,ico等文件加載不到，是目錄里少了dist
打開(kāi)頁(yè)面時(shí)一片空白
解決辦法：
config/index.js文件的build->assetsPublicPath的默認(rèn)值改為 './'
assetsPublicPath：資源的根目錄。這個(gè)是通過(guò)http服務(wù)器運(yùn)行的url路徑。因?yàn)閣ebapp和static中間還有層dist,所以要用'./'
2.另一個(gè)就是單純的在背景圖使用相對(duì)路徑導(dǎo)致加載不到圖片
例如登錄頁(yè)面的背景圖設(shè)置
我的目錄結(jié)構(gòu)是這樣的，
頁(yè)的時(shí)候沒(méi)發(fā)使用@/../static 只能使用../../../static
這個(gè)時(shí)候，打包過(guò)后的登陸頁(yè)面引用圖片路徑錯(cuò)誤，多了一個(gè)/static/css
解決辦法：
build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"
publicPath:重寫(xiě)該加載器(loader) css 的 publicPath 的設(shè)置
以上這篇解決vue-cli webpack打包后加載資源的路徑問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼
接到這樣的需求,日期篩選,但限制只能選擇同一個(gè)月的數(shù)據(jù),故此應(yīng)該去掉右側(cè)月份面板,今天通過(guò)本文給大家分享el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2024-06-06
Vue使用lodop實(shí)現(xiàn)打印小結(jié)
這篇文章主要介紹了Vue使用lodop打印小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了在vue項(xiàng)目中使用百度地圖的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價(jià)值,需要的朋友可以參考下2018-06-06
詳解vue computed的緩存實(shí)現(xiàn)原理
這篇文章主要介紹了vue computed的緩存實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
Vue利用History記錄上一頁(yè)面的數(shù)據(jù)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁(yè)面的數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解
在vue中我們使用模板HTML語(yǔ)法來(lái)組建頁(yè)面的，使用render函數(shù)我們可以用js語(yǔ)言來(lái)構(gòu)建DOM，這篇文章主要介紹了vue中的render函數(shù)、h（）函數(shù)、函數(shù)式組件,需要的朋友可以參考下2023-02-02
vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄
這篇文章主要介紹了vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄,文中是小編記錄的三個(gè)坑及解決方案，需要的朋友可以參考下2018-04-04
在vue中import()語(yǔ)法不能傳入變量的問(wèn)題及解決
這篇文章主要介紹了在vue中import()語(yǔ)法不能傳入變量的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04