這時如果直接執行npn run build是可以執行並打包你的程式碼的，不會報任何異常或錯誤，但是會看到打包完成有這樣一句提示：

打開了控制檯，看到console tab下一片404的各種找不到資源

解決方案

開啟專案資料夾。找到config資料夾裡的index.js檔案中的build物件，將assetsPublicPath中的“/”，改為“./”，並在build\build.js將這兩句的提示資訊刪掉或註釋掉，再打包直接用瀏覽器直接執行就好了。

vue-cli 打包之後圖片引用路徑問題

先來看下報錯：

首先看下我專案的dist目錄：

按理說，這個img的路徑應該是https://xxxxxxxxxxxxxx/dist/static/img/xxx.xxxxxx.png,但是很明顯路徑就成了https://xxxxxxxxxxxxxx/static/css/static/img/xxx.xxxxxx.png，首先應該可以確定是打包的時候出現了什麼問題。

其實很簡單。開啟/build/utils.js檔案，找到這段程式碼：

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
1
2
3
4
5
6
7
8
9
10
11
加上紅框內容：publicPath: '../../',當然這個路徑是根據自己專案的實際情況來的

再次npm run build就可以看效果啦。
--------------------- 
作者：AmberWu 
來源：CSDN 
原文：https://blog.csdn.net/AmberWu/article/details/80169271 
版權宣告：本文為博主原創文章，轉載請附上博文連結！