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

【非原創】【非原創】【非原創】重要的事情說三遍

 

今天在插入背景圖片過程當中，遇到了路徑錯誤的問題，經過網上查詢，找到了解決的辦法，可是大部分都沒有講形成這種問題的緣由，故我簡單地總結了一下，並加入了一些本身的理解，歡迎共同探討~

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

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

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

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

構建後的項目, 都須要讀取靜態資源，靜態資源分爲三種, JS, CSS, IMG，目錄結構以下：

//結構目錄

index.html

static

    |--img

        |--picname

    |--css

        |--app.css

    |--js

        |--app.js

　　此時經過img標籤引入的圖片顯示正常，是由於img爲html標籤，他的路徑是由index.html開始訪問的，他走static/img/'圖片名'是能正確訪問到圖片的。可是app.css訪問static/img/'圖片名'是訪問錯誤的，由於在css目錄下並無static目錄。因此此時須要先回退兩層到根節點處才能夠正確獲取到圖片。

具體辦法是：

打開build/utils.js，在圖中相應位置加入紅框內容，其中值可能會有不一樣，若不一樣，本身配置成相應的便可。

 

轉載自：CSDN     做者：liangxhblog

原文：https://blog.csdn.net/liangxhblog/article/details/78866066