最近我负责的项目也出现了这个问题。 然而，不仅是伪元素图标，伪元素内容在英文时也可能出现乱码。 查了资料elementui 图标乱码，解释一下乱码的原因：
1、图标编译后，由于dart-sass编译，导致图标内容乱码。 我尝试用 vue-clibuild 编译，并在本地直接使用 sass 命令，发现结果是一样的：编译 dart-sass 时，会将对应的 unicode 编码转换为对应的 unicode 明文，所以通过伪元素显示的图标比如el-icon-arrow:before{content:"e6df"}编译后会变成el-icon-arrow:before {content:""}，""是双字节字符
2、一般情况下，我们会在meta标签上设置:，但这仅对HTML内容分析有效，对css内容中双字节字符（如英文）的分析没有影响（外部样式下） sheet），所以如果浏览器请求的css资源的HTTP响应头中的Content-Type没有指定“charset=utf-8”，浏览器会使用自己的嗅探机制来决定使用哪种编码进行解析，结果总会出现双字节乱码的情况
解决方案：
1、与前端讨论后，让css资源请求的响应头的Content-Type减少“charset=utf-8”声明
2、使用@charsetelementui 图标乱码，但是这些方法我都尝试了很久，vue-cli编译出来的css都无法输出@charset“UTF-8”。 可以直接使用sass命令行编译
3.使用css-unicode-loader。 这是我最近写的一个webpack加载器。 用于将双字节字符的伪元素内容转换为unicode编码。 目前，我正在使用这些解决方案
发表评论