解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題
大家可否遇到過 npm run build 打包后，項(xiàng)目在線上運(yùn)行時(shí)，資源文件 (圖片、圖標(biāo))不顯示 的問題，
接下來，我給大家分享一下我的解決方案~
1.檢查打包后dist中的css文件
打開此文件后你會(huì)頭暈，因?yàn)槎际谴虬鼔嚎s過的css代碼，不過沒關(guān)系 ，關(guān)鍵字搜索url
檢查該url路徑是否匹配正確
對(duì)比后驚人發(fā)現(xiàn)?。?！
因此在url路徑前添加../../就OK了， 但是 很麻煩，每次打包后都要進(jìn)行二次加工嗎？
并不是?。?！
2.自動(dòng)添加 ../../ 的方法
打開build/utils.js，檢測(cè) publicPath 值是否正確，自己配置成相應(yīng)的即可！
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
配置好之后，npm run build打包后就會(huì)自動(dòng)匹配正確的路徑，無需手動(dòng)修改，
總結(jié)
以上所述是小編給大家介紹的解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue中子組件傳遞數(shù)據(jù)給父組件的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue項(xiàng)目百度地圖如何自定義標(biāo)注marker
這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3使用ECharts實(shí)現(xiàn)?；鶊D的代碼示例
?；鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動(dòng),在前端項(xiàng)目中,通過結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的?；鶊D,本文將通過完整的代碼示例,帶你一步步完成一個(gè)?；鶊D的實(shí)現(xiàn),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue如何自定義InputNumber計(jì)數(shù)器組件
這篇文章主要介紹了vue如何自定義InputNumber計(jì)數(shù)器組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開發(fā)中都會(huì)遇到的需求,每個(gè)用戶的權(quán)限是不一樣的,那他可以訪問的頁(yè)面(路由)可以操作的菜單選項(xiàng)是不一樣的,如果由后端控制,我們前端需要去實(shí)現(xiàn)動(dòng)態(tài)路由,動(dòng)態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下2024-02-02
淺談vue中document.getElementById()拿到的是原值的問題
這篇文章主要介紹了淺談vue中document.getElementById()拿到的是原值的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue使用echarts實(shí)現(xiàn)地圖的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語(yǔ)法,很少講實(shí)際的應(yīng)用場(chǎng)景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實(shí)際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue利用Moment插件格式化時(shí)間的實(shí)例代碼
Moment.js 是一個(gè) JavaScript 日期處理類庫(kù)，用于解析、檢驗(yàn)、操作、以及顯示日期。這篇文章主要給大家介紹了關(guān)于vue利用Moment插件格式化時(shí)間的相關(guān)資料,需要的朋友可以參考下2021-05-05