生产环境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'
目录
相关文章
|
API
Element UI Loading 加载组件动态变更 text 值(加载文案)
有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。
959 0
Element UI Loading 加载组件动态变更 text 值(加载文案)
|
20天前
|
小程序 前端开发
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
|
8月前
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
|
20天前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
20天前
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
|
7月前
|
前端开发
element-ui图标偶现乱码问题的原因和修复方法
之前很老的一个 webpack3 前端项目,用 vue-cli5 重构了一下,根据 vue-cli 文档安装的 sass 版本 ^1.32.7,sass-loader 版本 ^12.0.0,各种自测感觉没问题了就部署到线上了
116 0
修改title和icon小图片demo效果示例(整理)
修改title和icon小图片demo效果示例(整理)
|
11月前
|
数据库
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
424 0
|
11月前
layui框架实战案例(4):因内容安全策略导致弹出层模态框无法正常显示微信公众号文章使用window.open的解决方案
layui框架实战案例(4):因内容安全策略导致弹出层模态框无法正常显示微信公众号文章使用window.open的解决方案
48 1
|
11月前
解决el-image中预览图片功能顺序问题
解决el-image中预览图片功能顺序问题
177 0

热门文章

最新文章