elementui2.0图标错乱的问题

最新推荐文章于 2025-07-04 13:49:50 发布
最新推荐文章于 2025-07-04 13:49:50 发布
阅读量4.4k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wsxwang/article/details/78422681
本文解决了Element-UI升级到2.0后图标显示异常的问题。通过调整Webpack配置使用url-loader替代file-loader，成功将图标资源打包进文件，修复了图标错乱的现象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

element-ui升级到2.0之后，发现我的代码中图标是乱的，比如

<el-button icon="el-icon-refresh" type="text" size="small" @click="refresh">刷新</el-button>

出来的效果却不是刷新图标。具体原因没有深入排查，只是找到了解决方法，在webpack打包时，用url-loader替换file-loader，将图标打到数据中解决此问题。






猫爪熊
关注
前端必备：ElementUI 全面入门指南
AI架构全栈开发实战笔记
05-21 1181
ElementUI是一套基于Vue.js 2.0的桌面端组件库，由饿了么前端团队开发并开源。本文旨在为前端开发者提供一份全面的ElementUI学习指南，涵盖从基础安装到高级定制的所有内容。本文将从ElementUI的基本概念开始，逐步深入到具体组件的使用、主题定制和项目实战，最后讨论实际应用场景和未来发展趋势。Vue.js：渐进式JavaScript框架，用于构建用户界面组件：可复用的Vue实例，具有预定义选项响应式设计：界面能够适应不同屏幕尺寸的设计方法Vue 3.0适配。
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
elementui图标偶尔乱码问题
qq_41068783的博客
08-30 1118
variables.scss去掉icon.css文件引入。main.js中引入icon.css。安装node-sass。
一个少引入前端依赖导致elementui图标不显示的惨案
最新发布
qq_27707957的博客
07-04 269
element-ui打包到后端后，icon图标没法正常显示
vue、Element-UI 图标偶发性乱码问题解决方案
weixin_42717735的博客
06-08 4613
vue、Element-UI 图标偶发性乱码问题解决方案
vue项目打包上线element-ui的icon偶尔乱码问题
weixin_40883720的博客
02-21 2474
而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: “\e6df”}，编译之后就变成了el-icon-arrow:before{ content: “”}，“”便是一个双字节字符，导致出现乱码。查看是否是icon是否正常编码，下面展示为正常，不正常–下面圈起来的就是空的或者乱码。1、dart-sass替换成node-sass。
Chrome浏览器下ElementUI的Table组件错位
HowYouth的博客
08-08 1673
前言 最近项目采用了ElementUI作为前端框架，除了IE打不开之外，Chrome浏览器中如果进行页面的缩放，table组件的border会显示错位；其他浏览器正常。 处理方法 在App.vue中添加样式： //修复谷歌浏览器下table组件border错位问题 body .el-table th.gutter{ display: table-cell!impor...
Vue如何引入ElementUI并使用
后端开发
06-09 1227
Element UI是一个基于Vue 2.0的桌面端组件库，旨在构建简洁、快速的用户界面。由饿了么前端团队开发，提供丰富的组件和工具，帮助开发者快速构建高质量的Vue应用，并且以开放源代码的形式提供。
【ElementUI待办图标：实战秘籍】：提升效率的10个开发技巧
ElementUI 是一个基于 Vue 2.0 的桌面端组件库，广泛应用于前端开发中，为开发者提供了丰富的界面组件，而待办图标就是其中的一种交互元素。本章将对 ElementUI 待办图标进行概述，介绍其特点和用途，并且探讨如何在...
基于Vue2+ElementUI的信用卡还款整理理财前端应用设计源码
02-25
ElementUI作为该项目的UI框架，是基于Vue2.0的桌面端组件库，它提供了一套完整的高质量Vue组件，能够帮助开发者快速构建美观、易用的用户界面。ElementUI的设计风格简洁、优雅，且高度可定制，极大地提升了开发效率...
完美解决Vue文本编辑器 vue-quill-editor 和 element-ui 样式冲突造成的小图标样式错乱
大唐锦绣的博客
07-19 3928
前言:使用文本编辑器 vue-quill-editor和 element-ui 样式冲突造成的小图标样式。主要是由于el-form-item组件造成的样式冲突. 在不修改源码的基础上，通过赋值一个新类去修改此冲突 <template> <div> <quill-editor class="ql-edi...
EL中文显示乱码的解决办法
09-17
EL中文显示乱码的解决办法 EL中文乱码 EL中文显示乱码
ElementUI图标icon乱码问题
qq_38828542的博客
08-22 365
如题：ELementUI图标icon乱码问题 原因：在build编译时编译器处理导致的 解决方案 方案一：将saas更换为node-saas，安装不了问题可查看这里 方案二：升级saas和sass-loader 方案三：将element引入的样式代码注释，然后再main.js添加一行引入样式代码注释代码： import '~element-ui/packages/theme-chalk/s...
element出现了icon乱码和字符乱码怎么解决
weixin_44295184的博客
12-14 861
element出现了icon乱码和字符乱码怎么解决
vue+element-ui打包后找不到字体和图标库
Tino's Space
06-20 7136
在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { ...
element ui步骤条不对齐
DDghost的博客
06-09 4000
使用element ui的步骤条发现步骤条并没有对齐，效果见下图 明明代码应该是对的 <div > <el-steps> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3" desc...
elementUi icon有时乱码
weixin_45042694的博客
07-20 715
elementUi icon有时乱码。
elementui 打包后icon图标加载偶尔会乱码
热门推荐
疑问 搜索 动手 解决 记录
12-25 1万+
使用element UI 写项目， 项目在生产环境运行了一段时间后，页面刷新偶尔会出现 （搜索，箭头。。。）各种图标乱码情况 一顿搜索之后,大多数的原因是这两个造成的 一、element-ui版本原因 1.版本过低,有些图标在低的版本当中并没有支持,所以讲elementui卸载后重新装最新的版本 在项目中升级ElementUI需要先卸载原先的版本,在命令行中输入： npm uninstall element-ui 2.重新安装需要的版本 npm install element-ui –S （安装最新版本
解决elementUI打包上线后icon图标偶尔乱码的问题
qq_37831545的博客
08-22 4703
本项目是若依作为开发框架（elemen-ui + vue + sass），开发过程中，图标一直正常。直到打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示。 本项目使用的依赖包是sass（dart-sass），elementui使用的是node-sass，而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，编译之后就变成了“”，“”便是一个双字节字符，导致出现乱码。
Elementui
04-30
### Element UI 使用指南和组件文档 Element UI 是由饿了么前端团队开发的一套基于 Vue.js 2.0 的桌面端 UI 框架，提供了丰富的组件来支持开发者快速构建用户界面。以下是关于如何使用 Element UI 和其组件的相关说明。 #### 安装与配置 为了在项目中使用 Element UI，首先需要完成安装并进行必要的配置。可以通过 `npm` 命令安装该库： ```bash npm install element-ui --save ``` 接着，在项目的入口文件（通常是 `main.js`）中引入 Element UI 并注册全局组件[^3]： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 这样即可在整个应用中使用 Element UI 提供的功能。 #### 组件文档结构 Element UI 的官方文档非常详尽，涵盖了各个组件的详细介绍以及 API 参数列表。通常情况下，可以按照以下分类找到所需的组件信息： - **基础组件**：按钮、图标、颜色选择器等。 - **表单组件**：输入框、日期时间选择器、滑块等。 - **数据展示**：表格、分页、卡片视图等。 - **导航组件**：菜单栏、标签页、面包屑导航等。 - **反馈组件**：对话框、消息提示、通知等。 每种类型的组件都附带详细的属性描述、事件定义以及插槽选项[^1]。 #### 示例代码片段 下面是一个简单的例子，展示了如何利用 Element UI 中的 Button 组件实现点击弹窗效果： ```html <template> <el-button @click="openDialog">显示弹窗</el-button> <el-dialog :visible.sync="dialogVisible"> 这里是弹窗的内容部分！ </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { openDialog() { this.dialogVisible = true; }, }, }; </script> ``` 上述代码实现了当用户点击按钮时触发弹窗的效果[^2]。 --- ### 问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值