1. 程式人生 > >vue打包後背景圖片不顯示問題

vue打包後背景圖片不顯示問題

vue打包後CSS中引用的背景圖片不顯示問題
今天在插入背景圖片過程中,遇到了路徑錯誤的問題,通過網上查詢,找到了解決的辦法,但是大部分都沒有講造成這種問題的原因,故我簡單地總結了一下,並加入了一些自己的理解,歡迎共同探討~

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