element的icon在测试、生产环境偶尔乱码的解决

具体的表现就是偶尔刷新出现乱码,再次刷新就好了,不知道某一次刷新就会乱码;

icon乱码表现

在本地试不会出现这个问题的;发现这个乱码现象是我们上线了自定义修改element的ui样式,引入了自定义的样式文件后出现的,以为是自定义的样式文件中引入的icon路径出现了问题,检查看本地自定义样式文件就是按照官方说明进行的引入,但是看线上环境乱码时,引入的字体图标文件是成功的;


自定义样式文件
引入字体文件成功

再次百度发现很多网友也有遇到,说是dart-sass的问题,https://blog.csdn.net/qq_34707272/article/details/106720428这里有说明,看自己打包后的项目发现,安装的依赖包有sass和sass-loader,sass包内有dart.js文件,确实是在使用vue-cli创建项目时选择了dart-sass,所以引入的这个依赖包;

所以将sass卸载,安装node-sass,会自动安装最新版本,这时候会发现报错,提示node-sass的5.0.0版本和^4.0.0版本不匹配,就又去翻element的安装包,发现内部的package.json的依赖包的node-sass的版本是4.17.0版本,随意就又重新安装了自己的node-sass版本,最终才可以;

"node-sass": "^4.11.0",

"sass-loader": "^8.0.2",

你可能感兴趣的:(element的icon在测试、生产环境偶尔乱码的解决)