一文解決 Vue打包後訪問圖片/圖標不顯示的問題

你們能否遇到過 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打包後就會自動匹配正確的路徑，無需手動修改，
最終解決項目打包後 圖片/圖標/字體 不顯示的問題~

歡迎你們之後一塊兒交流與學習~
這是個人我的微信