Loading... ### vue、Element-UI 图标偶发性乱码问题解决方案 # 一、问题描述 使用vue+element-ui搭建网站时,打包到线上会有偶发性icon乱码的问题, 检查文件dist/css/app.xxx.css,发现所有的图标样式content的文本均异常。如:.el-icon-ice-cream-square:before{content:“”}。所以我们打包后的样式文件是有问题的。 # 二、解决方案 升级sass、配置vue.config.js 1. sass版本要在1.39.0以上 ``` npm install sass@1.39.0 ``` 2. vue.config.js 增加css配置 ```javascript devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { '/api': { target: '', ws: true, // proxy websockets pathRewrite: { '^/api': '/' } } }, disableHostCheck: true, }, // 有用代码开始 css: { loaderOptions: { sass: { sassOptions: { outputStyle: 'expanded' } } } }, // 有用代码结束 ``` # 三、检查修复结果 重新打包后,检查文件dist/css/app.xxx.css,发现所有的图标样式content的文本正常了。例:el-icon-moon:before{content:“\e6f0”}.看到这个就代表修复成功了 最后修改:2022 年 08 月 27 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏