大家可否遇到過 npm run build 打包后，項(xiàng)目在線上運(yùn)行時(shí)，資源文件 (圖片、圖標(biāo))不顯示的問題，

站在用戶的角度思考問題，與客戶深入溝通，找到寶安網(wǎng)站設(shè)計(jì)與寶安網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋寶安地區(qū)。

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

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

打開此文件后你會(huì)頭暈，因?yàn)槎际谴虬鼔嚎s過的css代碼，不過沒關(guān)系 ，關(guān)鍵字搜索url

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

對比后驚人發(fā)現(xiàn)?。?！

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

并不是?。?！

2.自動(dòng)添加 ../../ 的方法

打開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打包后就會(huì)自動(dòng)匹配正確的路徑，無需手動(dòng)修改，

總結(jié)

以上所述是小編給大家介紹的解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！