關于Vue背景圖打包之后訪問路徑錯誤問題的解決

案例環境

通過vue-cli腳手架創建的vue項目

在項目打包的時候遇到了背景圖片路徑出錯的問題，經過谷歌一番，發現是在配置的時候對圖片的限制大小過小造成的

首先，出錯點在url-loader上面。

// url-loader配置
// build/webpck.base.conf.js
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
 limit: 10000,
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

這里解釋一下上面這段url-loader配置，test是正則匹配規則，匹配項目中所有的以正則規則結尾的格式的文件，直白點就是所以的圖片（png，jpg，jpeg，gif，svg）。然后用url-loader進行處理。處理也有個規則如下，當不大于10000B的文件進行base64轉碼，就是將圖片轉為base64的格式。如果超過10KB的圖片就單獨打包到utils.assetsPath(‘img/[name].[hash:7].[ext]') 這個目錄下（從build/utils.js和config/index.js可以知道這個路徑就是static/img目錄，并且圖片名是進行hash之后的值，根目錄下面沒有static目錄，所以會創建一個static目錄，至于為什么最后沒有看見這個目錄后續再說）,當我們創建了一個這樣的目錄之后，所以的圖片訪問路徑就成了對應的static/img/'圖片名'。到這里就可以確定，如果小于10KB的圖片轉為base64，大于10KB的圖片已經將圖片路徑改為了static/img/'圖片名'，然后我們繼續來理清訪問路徑的事情。

// 目前我們的目錄結構
index.html
static
 |--img
 |--'picname'
 |--css
 |--app.css
 |--js
 |--app.js

我們知道img為html標簽，他的路徑是由index.html開始訪問的，他走static/img/'圖片名'是能正確訪問到圖片的，所以img的路徑沒問題，然后app.css訪問static/img/'圖片名'是訪問錯誤的，因為在css目錄下并沒有static目錄。這樣就造成了路徑訪問失敗的問題。

解決辦法

1、使用小圖片作為背景圖片（建議）：

將小于10KB的圖片作為背景圖片，如果有大于10KB的圖片作為img圖片。

2、修改url-loader的limit值（不建議）：

從上面分析可知，當圖片轉為base64就沒有路徑錯誤的問題，保證自己的背景圖片都能轉為base64就可以防止該錯誤發生,將limit的值改為你的背景圖最大那一張的值還大一點就行，換算為B的單位

3、將css不要單獨打包出來（不建議）：

直接通過css-loader和style-loader打包到js中，js自動創建style標簽，這樣，背景圖片的訪問路徑就是通過index.html路徑訪問了，不過該解決方案也不建議。會導致js過大，和圖片過大不建議轉base64一個道理。

4、使用絕對路徑的圖片地址路徑（建議）

建議：使用小圖片作為背景圖片，大圖片用img標簽。首先得分清背景圖片和圖片img的一些區別，就各人理解而言，背景圖片是用來修飾網頁的，與實際內容無關的東西，使用背景圖片。如果與內容有關的東西都應該使用img標簽算作網頁結構的內容。修飾的圖片盡量的小，也可以使用圖片壓縮等策略減小圖片大小。

不建議：不建議修改limit值的原因是，url-loader的配置是針對整個項目的圖片，修改了limit值也等于讓html中img標簽的圖片也跟著進行了base64的轉換，而對于base64的轉換的缺點是他會增大圖片原本的體積，如果對大圖進行了轉base64會造成你的js文件過大，從而增加了加載js時間過長。

關于base64

優點：base64就是一串字符串碼來表示的圖片，在加載頁面或者js的時候就一并加載過來，減少圖片引用時單獨的一次http請求。了解web端性能優化的同學都知道，http請求每次建立都會占用一定的時間，對于小圖請求來說，可能http建立請求的時間比圖片下載本身還長。所以對小圖進行base64轉碼是優化http請求，保證頁面加速渲染的一種手段。

缺點：base64缺點就是之前提到的，他會增加圖片本身的大小，對小圖片來說，增加大小導致js的請求增長完全能彌補多一個http請求的建立的時長，這種取舍是劃算的。可是對于大圖來說，這樣的取舍是不劃算的。

舉個例子

例子：（以下數據都是隨便模擬，看看思路就行）
假如每次建立http時長為0.1s，網絡傳輸為100KB/s，每次轉base64增加體積為百分之二十；

1. 一張10KB的圖片通過http請求下載為0.2s，他轉為base64之后為12KB，在js下載中，增加了12KB的大小，所以增加0.12S 所以轉base64能優化0.08s的頁面加載速度；
2. 一張100KB的圖片通過http請求的速度是1.1s。轉base64之后大小為120KB，他會增加js的大小120KB，所以增加加載時間1.2s。這樣一算下來，轉為base64之后，并不能優化頁面加載速度，反而拖慢了0.1s的加載速度，為不劃算。

思考：

在開發過程中，處理加載速度之外我們還得考慮并行下載的問題。如果全在一個js中，這個js沒下載完成之前，圖片也是沒有下載的，也就是轉base64之后，可以認為js和圖片是串行下載的。而走http請求，圖片是可以和js并行下載的。所以實際上需要更小的圖片才能更劃算

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com