專案用run dev build 打包後，發現很多圖片都不顯示，在本地是沒有問題的啊！找原因發現通過webpack+vuecli預設打包的css、js等資源，路徑都是絕對的。

9E3E9C06-4873-4D1B-A5B3-35C71889249E.png

因為我們的圖片路徑都是經歷過資料夾的，在本地引用圖片是絕對路徑，但打包後因為把配置的static資料夾當成了根路徑，所以很多圖片找不到都不顯示。

解決辦法如圖：

(1).

修改 assetsPublicPath: './'

(2).開啟webpack.prod.conf.js，在output：增加 publicPath: './'

7822D742-9A09-428A-A270-B5320A809759.png

雖然解決了資源路徑的引用問題，但是資源裡面的背景圖片還是不顯示， background: url("../../assets/images/logo-index.png") no-repeat;被相對打包後變成了url(static/img/logo-index.2fbf2.png) no-repeat所以我們要保留css引用圖片的正常路徑，即：url(../../static/img/logo-index.2fbf2.png) no-repeat
那麼就需要修改build資料夾下的utils.js程式碼，如圖所示：

新增publicPath:'../../'這一行程式碼，這樣不論是字型還是圖片的引用問題都能解決。