Element-ui框架:前端打包部署後部分圖示不顯示或者顯示為小方塊的問題
阿新 • • 發佈:2022-05-19
一、問題如下
vue前端專案引入element-ui框架後,本地執行圖示正常顯示,但打包部署後部分圖示不顯示。
二、問題解決
1.問題分析
由於本地執行時圖示可以正常顯示且在打包部署後部分圖示也能夠正常顯示,說明dev和build的配置引用路徑應該是沒有問題。
從部分圖示依舊可以正常顯示來看,問題應該出在這部分圖示和無法顯示圖示的差異上,找到引入外部檔案的規則。
webpack.base.conf.js配置檔案中的module.exports下module的rules,其中woff格式引入如下:
這裡的limit配置項會指定檔案大小,小於limit的圖片無法生成圖片並以base64格式被引入,大於limit的圖片將以url載入
無法正常顯示的部分圖示可能是因為limit大小限制,調整為100000後重新打包部署。
2.處理結果:
注:目前配置大小限制、外部檔案引入路徑和框架版本問題都有可能引起圖示不顯示,所以具體情況還得具體分析,此處只是其中一種。