大家可否遇到過 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打包后訪問圖片/圖標不顯示的問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！