生产环境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'
目录
相关文章
|
存储
Vue3 实现 PDF 文件在线预览功能
Vue3 实现 PDF 文件在线预览功能
2309 0
|
存储 JavaScript 编译器
玩转vitepress1.0,搭建个人网站~
当初1月份的时候为了后续春招求职,就使用vitepress搭建了一个个人网站,然后把自己本地的一些md文件整理了发布在了上面,不过当时vitepress还未发布正式版本,还是0.22.x这样的版本, 所以其实有很多不满意的地方,比如侧边栏折叠之前没有,明暗模式之前没有,单篇文章的大纲好像也没有,侧边栏在不同tab下有问题,这些我不太确定,可能功能是有的,但是官方文档上没更新罢了
697 0
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
11月前
|
存储 开发工具 数据安全/隐私保护
git报错The project you were looking for could not be found 解决方式
git报错The project you were looking for could not be found 解决方式
2859 1
|
Web App开发 iOS开发 容器
Vue3PDF预览(vue3-pdf-app)
`vue3-pdf-app` 插件提供了一个简单而强大的 PDF 预览解决方案。通过 `<a>` 标签即可快速预览 PDF 文件。为满足更复杂的定制需求,提供了 `PDFViewer.vue` 组件,基于 `vue3-pdf-app@1.0.3` 封装,支持多种功能如缩放、旋转、全屏预览、打印等,并可自定义主题颜色与语言。组件属性包括文件地址 (`src`)、预览容器尺寸 (`width`, `height`)、默认缩放规则 (`pageScale`) 和主题 (`theme`) 等。适用于多种浏览器,方便集成到项目中。
2430 2
Vue3PDF预览(vue3-pdf-app)
|
Python
NPM【问题 01】npm i node-sass@4.14.1报错not found: python2及Cannot download问题处理
NPM【问题 01】npm i node-sass@4.14.1报错not found: python2及Cannot download问题处理
1786 0
|
JavaScript
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
这篇文章介绍了在Vue项目中安装node-sass和sass-loader时遇到的版本冲突问题,并提供了解决这些问题的方法,包括在不降低node版本的情况下成功安装node-sass。
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
node node-sass sass-loader版本对应问题,对于npm编译大家经常遇到这个问题
node node-sass sass-loader版本对应问题,对于npm编译大家经常遇到这个问题
1885 2
|
JavaScript
rollup的input配置和output配置详解
【8月更文挑战第5天】rollup的input配置和output配置详解
465 4
rollup的input配置和output配置详解
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
1182 1