一、问题描述
使用vue+element-ui搭建网站时，打包到线上会有偶发性icon乱码的问题，
检查文件dist/css/app.xxx.css，发现所有的图标样式content的文本均异常。如：.el-icon-ice-cream-square:before{content:“”}。所以我们打包后的样式文件是有问题的。
二、解决方案
升级sass、配置vue.config.js文章来源：https://www.toymoban.com/news/detail-507192.html
- sass版本要在1.39.0以上
npm install sass@1.39.0
- vue.config.js 增加css配置
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”}.看到这个就代表修复成功了文章来源地址https://www.toymoban.com/news/detail-507192.html
到了这里，关于vue、Element-UI 图标偶发性乱码问题解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
