解決Vue打包后訪問圖片/圖標不顯示的問題
更新時間：2019年07月25日 08:39:13 作者：東北大呲花
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標不顯示的問題，本文給大家介紹的非常詳細，具有一定的參考解決價值,需要的朋友可以參考下
大家可否遇到過 npm run build 打包后，項目在線上運行時，資源文件 (圖片、圖標)不顯示 的問題，
接下來，我給大家分享一下我的解決方案~
1.檢查打包后dist中的css文件
打開此文件后你會頭暈，因為都是打包壓縮過的css代碼，不過沒關(guān)系 ，關(guān)鍵字搜索url
檢查該url路徑是否匹配正確
對比后驚人發(fā)現(xiàn)?。?！
因此在url路徑前添加../../就OK了， 但是 很麻煩，每次打包后都要進行二次加工嗎？
并不是?。?！
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打包后訪問圖片/圖標不顯示的問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue學(xué)習(xí)筆記之slot插槽基本用法實例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽基本用法,結(jié)合實例形式分析了vue slot插槽基本使用方法與操作注意事項,需要的朋友可以參考下2020-02-02
下面小編就為大家分享一篇vue實現(xiàn)提示保存后退出的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目如何實現(xiàn)前端預(yù)覽word與pdf格式文件
最近項目中需要在線預(yù)覽WORD文檔,所以給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項目如何實現(xiàn)前端預(yù)覽word與pdf格式文件的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
Vue中常用的rules校驗規(guī)則的實現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了Vue實現(xiàn)選擇城市功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
關(guān)于Element-ui中table默認選中toggleRowSelection問題
這篇文章主要介紹了關(guān)于Element-ui中table默認選中toggleRowSelection問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue中scss語法的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue.js 圖片上傳并預(yù)覽及圖片更換功能的實現(xiàn)代碼
這篇文章主要介紹了vue.js 圖片上傳并預(yù)覽及圖片更換功能，小編主要圍繞我們?nèi)粘Ｊ褂霉δ艿睦幼鲋v解，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)div滾輪放大縮小，拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06