大家可否遇到過 npm run build打包后，項目在線上運行時，資源文件 (圖片、圖標)不顯示 的問題，

接下來，我給大家分享一下我的解決方案~

1.檢查打包后dist中的css文件

打開此文件后你會頭暈，因為都是打包壓縮過的css代碼，不過沒關系 ，關鍵字搜索url

檢查該url路徑是否匹配正確

對比后驚人發現！！！

因此在url路徑前添加../../就OK了， 但是 很麻煩，每次打包后都要進行二次加工嗎？

并不是！！！

2.自動添加 ../../ 的方法

打開build/utils.js，檢測 publicPath 值是否正確，自己配置成相應的即可！

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

配置好之后，npm run build打包后就會自動匹配正確的路徑，無需手動修改，

總結

以上所述是小編給大家介紹的解決Vue打包后訪問圖片/圖標不顯示的問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

總結

以上是生活随笔為你收集整理的vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。