生产环境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'
目录
相关文章
|
前端开发 JavaScript
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
|
5月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
5月前
Element UI 源码改造 —— 自定义数字输入框的实现
Element UI 源码改造 —— 自定义数字输入框的实现
208 1
|
7月前
elementui生产环境图标加载时偶而乱码
elementui生产环境图标加载时偶而乱码
114 1
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
1002 0
|
7月前
css3快速完成重构title提示tip样式
css3快速完成重构title提示tip样式
|
前端开发
element-ui图标偶现乱码问题的原因和修复方法
之前很老的一个 webpack3 前端项目,用 vue-cli5 重构了一下,根据 vue-cli 文档安装的 sass 版本 ^1.32.7,sass-loader 版本 ^12.0.0,各种自测感觉没问题了就部署到线上了
303 0