解決Vue打包后背景圖片路徑錯誤問題


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,在圖中相應位置加入紅框內容,其中值可能會有不同,若不同,自己配置成相應的即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM