elementui生产环境图标加载时偶而乱码

叁歲伎倆 2023-05-21 08:58 8阅读 0赞

### elementui 打包后图标加载偶尔会乱码 ###

*   *  preface
     *  错误现象
     *  猜想
     *  解决方案
     *   *  1. elementui 源码使用的是 node-sass
         *  2. 我本地的 是 dart-sass
         *  3. 查看了 打包后的css 文件
         *  4. 卸载 dart-sass
         *  5. 打包后的 css

## preface ##

最近在 使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况。

1.  使用的是 elementui@2.13.0
2.  打包方式 `main.js 引入 element...scc` 文件（非 cdn,因为我需要更换主题色）

解决办法： **用 node-sass 打包，不要使用 dart-sass**

## 错误现象 ##

> 通过下面的图片可以看出 图标显示问题很严重啊

![在这里插入图片描述][20200424124933834.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]  
下面这句话可以不看。

> 1.  我之前还遇到 一个案例是 **文字都显示错误**了，当然是在一个同事的mac 上，我远程过去后， 查看 dom 元素，发现dom中自动添加了其他标签。最后我通过在 https://codepen.io/ 测试 elementui 该组件是否会产生同样的问题。
> 2.  最终确定 是我们的页面有问题，仔细看了页面 又些文字变成了 繁体字
> 3.  很明显google 的翻译插件问题嘛
> 4.  哈哈， 关闭了 实时翻译插件就好了

## 猜想 ##

> 这里可直接跳过去

可能是 `woff` 字体文件 没有 加载成功

**通过控制台查看， woff 字体确实是加载成功的。**

我又猜想 woff 字体文件加载 太慢了， 导致样式没有显示出来（后来我否定了，woff 的加载肯定是 阻塞 css tree 构建的， 因为之前我有个项目 引入了平方字体(大约 10多M )，最后渲染特别慢。

## 解决方案 ##

> cdn 引入方案肯定是没有问题的， 但是我不能使用，所以从一个开始我就去除了这个 方案，作为备选方案。

论坛上看了，有人说 sass 编译的问题。 我就进行了如下操作

### 1. elementui 源码使用的是 node-sass ###

> 猜测 dart-sass ,node-sass，或者版本号问题。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]

### 2. 我本地的 是 dart-sass ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 2]  
很显然， 问题应该是找到了

### 3. 查看了 打包后的css 文件 ###

> 下次出问题后，还是先看 源文件吧，还快些。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 3]  
明显是乱码啊！！！

### 4. 卸载 dart-sass ###

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

如果 node-sass 下载不下来，可以去网上找找教程，我下载没问题

### 5. 打包后的 css ###

> 哈哈，好开熏  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 4]

[20200424124933834.png]: /images/20230521/b8d58cb06c994cd9839e003f2eb7241d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]: /images/20230521/15f13aaf61bf45dcb4cfdd0bbcd48513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]: /images/20230521/63a16e48333c4098bcbf7ea97df546a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 2]: /images/20230521/6c73d16aeb264a21a978bf0dbef9e651.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 3]: /images/20230521/3f73e961f4ea41e6838668dc30f80ea3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 4]: /images/20230521/73b0260cb86547e3ac0d0e9597dc79f5.png