首页 > 建站教程 > 前端框架 >  elementUI 生产环境字体图标偶尔乱码问题解决正文

elementUI 生产环境字体图标偶尔乱码问题解决

我爱模板网在做用elementUI做常德应急时,用的是客户自己的产品框架,element ui 2.13.2,遇到了一个问题,就是打包到线上部署的生产环境,图标经常性乱码,如下图:



打开调试工具,查看如下:



查看编译后的css,所有的字体图标都是这样:



就算正常状态下,查看的字体也是乱码样式:



我的理解应该字体图标都是类似于:\e6ce,这种,即unicode字符集里面,E000 至 F8FF属于用户造字区,应该是自定义的字符或图标。网上查阅资料,得知dart-sass编译时,容易出问题。查看了package.json,发现这个版本的确是dart-sass
"sass": "1.26.2",
解决方法:使用node-sass打包方式

一、卸载dart-sass
npm uninstall sass
二、安装node-sass
npm install node-sass -D
然后重新打包,如果您出现下面的错误提示:
Node Sass version 5.0.0 is incompatible with^4.0.0

请卸载已安装node-sass
npm uninstall node-sass
然后安装4.14.1版本
npm install node-sass@4.14.1
再次重新运行,图标正常了,用调试工具查看,发现字体正常了: