Vue項目開發之打包後背景圖片路徑錯誤的坑

　　在開發vue項目的過程當中,使用瀏覽器進行預覽的時候全部圖片的路徑是沒有任何問題的,可是在打包後傳到服務器上,在微信端查看背景圖片時,background的圖片居然不顯示,img標籤裏的圖片倒是正常展現的,經過網上查詢，找到了解決的辦法，可是大部分都沒有講形成這種問題的緣由，故我簡單地總結了一下，並加入了一些本身的理解，歡迎共同探討~

        當用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，在圖中相應位置加入紅框內容，其中值可能會有不一樣，若不一樣，本身配置成相應的便可。