vue-cli3環境上圖檔加載不出來經驗小結

雲栖号資訊：【 點選檢視更多行業資訊

】

在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！

背景

本地完全OK，所有圖檔(svg,png等)都可以正常加載，環境上除了阿裡G6的網格加載不出來其他正常。但是突然有一天，環境上除了阿裡G6的網格，還有其他表示類型的圖檔(png)也都加載不出來。

分析

F12可以看到控制台報了XXXContent Security PolicyXXX之類的錯誤(公司電腦無法截圖)，是以懷疑是CSP相關的原因，後來看了下代碼，由于安全原因，背景給http都加了頭資訊Content-Security-Policy。

vue-cli3打包的時候，對圖檔打包進行了優化，預設小于10KB的圖檔(比如png，注意svg不會)轉為base64。

base64就是一串字元串碼來表示的圖檔，在加載頁面或者js的時候就一并加載過來，減少圖檔引用時單獨的一次http請求，進而優化http請求，保證頁面加速渲染。

如果Content-Security-Policy: default-src 'self'，就導緻了環境上的圖檔加載失敗。

CSP政策

本質上是白名單制度，開發者明确告訴用戶端，哪些外部資源可以加載和執行，等同于提供白名單。它的實作和執行全部由浏覽器完成，開發者隻需提供配置。可以預防XSS攻擊。

CSP的開啟方法：

a.通過 HTTP 頭資訊的Content-Security-Policy的字段(後端)

b.通過網頁的标簽(前端)

如果Content-Security-Policy: default-src 'self'，會限制所有的外部資源(img,font,script,style等等)，都隻能從目前域名加載

解決

a.CSP政策放開img

b.圖檔不做base64轉換

拓展：url-loader 和 file-loader的差別

file-loader 傳回的是圖檔的url

url-loader 可以通過limit屬性對圖檔分情況處理，當圖檔小于limit（機關：byte）大小時轉base64，大于limit時調用file-loader對圖檔進行處理。

【雲栖号線上課堂】每天都有産品技術專家分享！

課程位址：

https://yqh.aliyun.com/zhibo

立即加入社群，與專家面對面，及時了解課程最新動态！

【雲栖号線上課堂 社群】

https://c.tb.cn/F3.Z8gvnK

原文釋出時間：2020-04-08

本文作者：refire_zj

本文來自：“

掘金

”，了解相關資訊可以關注“掘金”