1.原因解析

當用vue-cli自動構建項目后，有兩種運行方法，分別是：

　　npm run dev?: 提供一個開發的環境，自動熱更新，資源使用絕對路徑，所以可以正常看到背景圖片。

　　npm run build?: 打包項目，資源使用相對路徑，所以會出現路徑錯誤問題。

注:

絕對路徑：從盤符開始的路徑，如：C:\windows\system32\cmd.exe

相對路徑：從當前路徑開始的路徑

構建后的項目, 都需要讀取靜態資源，靜態資源分為三種, JS, CSS, IMG，目錄結構如下：

//結構目錄

?

? ? ? ?此時通過img標簽引入的圖片顯示正常，是因為img為html標簽，他的路徑是由index.html開始訪問的，他走static/img/'圖片名'是能正確訪問到圖片的

但是app.css訪問static/img/'圖片名'是訪問錯誤的，因為在css目錄下并沒有static目錄。所以此時需要先回退兩層到根節點處才可以正確獲取到圖片。

2.解決方案

具體辦法是：

打開build/utils.js，在圖中相應位置加入紅框內容，其中值可能會有不同，若不同，自己配置成相應的即可。

轉載：https://www.cnblogs.com/crazycode2/p/8623063.html

轉載于:https://www.cnblogs.com/sweeeper/p/11232272.html

總結

以上是生活随笔為你收集整理的解决Vue打包后背景图片路径错误问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。