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