elementui生產環境圖標加載時偶而亂碼

preface

最近在 使用element UI 寫項目， 項目在生產環境運行了一段時間後，頁面刷新偶爾會出現 （搜索，箭頭。。。）各種圖標亂碼情況。

1. 使用的是 [email protected]
2. 打包方式 main.js 引入 element...scc 文件（非 cdn,因爲我需要更換主題色）

解決辦法： 用 node-sass 打包，不要使用 dart-sass

錯誤現象

通過下面的圖片可以看出 圖標顯示問題很嚴重啊

下面這句話可以不看。

1. 我之前還遇到 一個案例是 文字都顯示錯誤了，當然是在一個同事的mac 上，我遠程過去後， 查看 dom 元素，發現dom中自動添加了其他標籤。最後我通過在 https://codepen.io/ 測試 elementui 該組件是否會產生同樣的問題。
2. 最終確定 是我們的頁面有問題，仔細看了頁面 又些文字變成了 繁體字
3. 很明顯google 的翻譯插件問題嘛
4. 哈哈， 關閉了 實時翻譯插件就好了

猜想

這裏可直接跳過去

可能是 woff 字體文件 沒有 加載成功

通過控制檯查看， woff 字體確實是加載成功的。

我又猜想 woff 字體文件加載 太慢了， 導致樣式沒有顯示出來（後來我否定了，woff 的加載肯定是 阻塞 css tree 構建的， 因爲之前我有個項目 引入了平方字體(大約 10多M )，最後渲染特別慢。

解決方案

cdn 引入方案肯定是沒有問題的， 但是我不能使用，所以從一個開始我就去除了這個 方案，作爲備選方案。

論壇上看了，有人說 sass 編譯的問題。 我就進行了如下操作

1. 官網的 node-sass

猜測 dart-sass ,node-sass，或者版本號問題。

2. 我本地的 是 dart-sass

很顯然， 問題應該是找到了

3. 查看了 打包後的css 文件

下次出問題後，還是先看 源文件吧，還快些。

明顯是亂碼啊！！！

4. 卸載 dart-sass

1. npm uninstall sass
2. npm install node-sass -D

如果 node-sass 下載不下來，可以去網上找找教程，我下載沒問題

5. 打包後的 css

哈哈，好開薰