侧栏 element-icon显示为方块bug记录

问题：element-ui中的icon都变成了框。

这里这个limit 配置项会指定文件大小，小于limit的图片无法生成图片并以64格式引入，大于limit的图片将以url加载。

1.最开始引用官网的css是正常显示的 官网css的url地址：<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 2.从官网下载index.css放到本地后就显示方框了 <link href="../Css/index.css" rel="stylesheet" /> 3.最后得知，官网提供的url有个/fonts/element-icons.t.

vue+elementui项目之前打包后部署服务器，图标还是好好的，突然今天就不好使了，如下图 查阅各种资料，最后忘记是看了哪篇文章后，说是webpack打包配置有问题，具体改法是：在build文件夹下找到utils.js 找到如上图代码处，加入红色圈起来的部分，虽然我注释掉了，但是我的代码里之前没有这句 之所以注释掉了，是因为我加上这句话后打包部署到服务器后，发现真的好使了，图标可以正常显示...

过程： 历史项目用的是vue 3.0.0，element plus 1.0.0 参考其他大佬的方法(文末)，全局install并注册了element plus 的 icon 组件库。 npm install @element-plus/icons-vue import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ELIcons from '@element-plus/icons

你是否还在为表单验证卡顿烦恼？是否遇到过表格展开状态异常的问题？Element Plus 2.9.7版本（2025-04-25发布）带来了15+组件增强与20+问题修复，本文将带你快速掌握这些实用更新，让前端开发效率提升40%。 ## 核心更新概览 本次更新聚焦三大方向：**表单交互优化**、**数据展示增强**和**性能稳定性提升**。通过重构核心组件逻辑，解决了长期存在的用户痛点。完整更新...

本周对全平台五个页面进行了布局统一改造，推广侧边栏导航组件，优化了菜单图标与用户状态切换。重组了作文评阅页布局，分区展示结果与建议。重点实施了游客登录全链路改造，从路由、页面到组件统一拦截策略，允许游客浏览但限制高级功能。修复了箭头对齐、数据兼容等八例交互细节，全平台视觉与交互达成统一。

路由映射是前端单页应用的核心机制，本质是将 URL 路径（如 /users/:id）与 React 组件建立可预测、可维护的声明式绑定关系。其底层原理依赖路径匹配算法、嵌套路由树结构及上下文注入机制，技术价值在于实现页面解耦、布局复用、错误隔离与服务端渲染友好。典型应用场景包括后台管理系统、多租户 SaaS 平台、权限动态路由等。本文聚焦 React Router V6 的 route 配置、path 语义（精确/动态/通配/索引）、element 渲染模型及嵌套路由协作机制，深入解析如何避免刷新 404、

vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题

前端在打包部署到服务器上后，原本在本地正常显示的图标变成方框了，在网上查了查资料后发现有两个原因，一是打包后静态资源路径问题，这个解决办法网上很多， 这里就不讲了，二是静态资源跨域问题，在nginx配置文件加入以下片段重启nginx服务器成功解决 location ~* \.(eot|otf|ttf|woff|woff2)$ { root /home/app/; add_header Access-Control-Allow-Origin *; } ...

有时候我们在本地写好的vue 图标显示都正常 只要是发布上线就会变成如下的小框框 解决办法:在build文件中找到utils.js 加上一行 publicPath：'../../' 就可以解决了 完美解决了

前端在打包部署到服务器上后，原本在本地正常显示的图标变成方框了，在网上查了查资料后发现有两个原因，一是打包后静态资源路径问题，这个解决办法网上很多，这里就不讲了，二是静态资源跨域问题，在nginx配置文件加入以下片段重启nginx服务器成功解决 location ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; } ...

1、尝试过换版本，用的最新的版本，没有解决问题 解决方法 2、在build->webpack.base.conf.js文件中发现有重复项 删去下面那个，再重新npm run dev项目，发现图标显示正常

除了内置图标，还支持自定义图标的引入和使用。引入自定义图标字体或 SVG 文件。在组件中进行注册和使用。例如：首先先画一个图标svg {width: 1em;在main.js中注册图标// 导入自定义图标// 全局注册自定义图标引用import CustomIcon from './path/to/custom-icon.vue' // 导入自定义图标。

当前页面完整代码实现的是单个的绘制,多个绘制一样的 只是我这里绘制完成后在绘制就清除了上一个绘制。

解决方法：修改项目中build/utils文件 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) } ..

el-button中的各种按钮

看了一下网上大部分的做法，却没有一种能够解决我的问题 在苦苦钻研了几个小时后，问题终于解决了，解决方法如下： 在config文件里面的index.js文件当中，找到这个代码块，添加箭头所指的代码，注意加上那个小点。 问题解决 ...