生产环境element icon乱码展示

简介: 生产环境element icon乱码展示

项目打包部署后,使用的iconfont图标偶尔会出现乱码。网上查阅资料,原因主要有两个,一是element版本太低,不支持一些图标;二是sass编译导致的问题。

查看项目引入的element版本为2.10.1,排除版本低的原因,如果是版本低,则升级版本再尝试。再者,乱码问题并不是一直出现,存在随机性,也排除element版本低而导致。

从sass编译角度排查,element源码中使用的node-sass,而项目编译如果使用dart-sass,可能就会出现问题。在package.json中找到引入的是sass,而不是dart-sass,查阅资料说其内部依赖的是dart-sass,那么就卸载sass或dart-sass,安装node-sass和sass-loader,安装可能会失败,此时需要查询项目使用的element版本和它对应的node-sass和sass-loader版本,指定版本安装。

// 卸载
npm uninstall sass dart-sass --save

// 安装
npm install node-sass@4.11.0 sass-loader@7.1.0 --save

如果是在无外网环境开发或不方便更换依赖,也可以选择不将iconfont图标编译,直接引用。所以这种方式不适用于一键部署。

1. 找到node_modules\element-ui\packages\theme-chalk\src\base.scss文件,去掉icon.scss的引入
2. 在main.js引入:import 'element-ui/lib/theme-chalk/icon.css'
目录
相关文章
|
6月前
|
前端开发 微服务
Element-Plus 图标自动导入
Element-Plus 图标自动导入
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
1286 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
4月前
Element UI 源码改造 —— 自定义数字输入框的实现
Element UI 源码改造 —— 自定义数字输入框的实现
176 1
|
6月前
elementui生产环境图标加载时偶而乱码
elementui生产环境图标加载时偶而乱码
106 1
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
920 0
|
6月前
element plus 的图片上传组件回显
element plus 的图片上传组件回显
144 0
|
前端开发
element-ui图标偶现乱码问题的原因和修复方法
之前很老的一个 webpack3 前端项目,用 vue-cli5 重构了一下,根据 vue-cli 文档安装的 sass 版本 ^1.32.7,sass-loader 版本 ^12.0.0,各种自测感觉没问题了就部署到线上了
279 0