Vue Element UI webpack 打包后 字体图标显示不正常问题解决

本文深入分析了Element UI字体图标在Maven打包后无法显示的常见问题，其核心原因是Maven资源过滤机制破坏了woff、ttf等二进制字体文件。文章提供了详细的pom.xml配置方案，通过设置maven-resources-plugin的nonFilteredFileExtensions来排除字体文件，并分享了进阶排查步骤与项目构建最佳实践，帮助开发者一劳永逸地解决图标解码失败问题。

Element-ui项目打包后icon图标不显示 element-ui 自带了一套常用的图标集合，使用起来十分方便。最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的 而一旦使用 npm run build 编译打包后发布到服务器上，会发现图片显示不出来（Chrome 浏览器下显示方块 查看网络请求可以看到如下两个字...

原因明确，但是本人着实不懂 打包的地址配置，截止编写此文，element-ui的字体图标没有得到解决，以至于下拉框等图标还是不显示。在项目的main.js引入的import 'element-ui/lib/theme-chalk/index.css’就不需要了；通过多方查找资料最后又回到了Vue CLI，解决的核心在于此文档URL 转换规则 ，根据文档我的理解是因为打包，element-ui的样式没有当做静态资源引用。上述的步骤，在 iconfont.cn官网的文档->symbol 引用有详细描述。

vue/cli-service5 打包后element-ui字体图标不显示，找不到fonts目录

解决Unity WebGL UIToolkit 中文无法显示问题

Element-UI在vue项目中，打包build后字体、图标丢失 应用场景： F12报错提示： 问题原因： （1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。 （2）也就是说实际应该通过/static/fonts/**...

出现打包后icon图标变成小方块的原因只有两个 一。element-ui版本和element-ui/lib/theme-chalk/index.css版本不一致。 解决办法： 卸载已经有的element-ui npm uninstall element-ui 然后在安装新的 npm install element-ui 二。打包后的element-icons.woff 和el...

昨天在 vue 项目中编写 element-ui 的树形结构的表格，发现项目中无法生效，定位问题之后发现项目使用的 element-ui 的版本是 2.4.11。这个 BASE_URL 是样式渲染的根目录，通过拼接可以看出来，BASE_URL = ‘/static’，也就是说，在渲染样式的时候，定位到 /static 目录下。有知道的请评论区告诉我）。而在 element-ui-2.15.14 版本下，系统还会加载 font 目录下的两个文件，由于我所在项目配置问题，所以扫描的路径是基于当前路径。

文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1、config—index.js文件3.2、build—webpack.prod.conf.js 文件3.3、element ui 字体文件加载出错3.4、路由跳转出现js访问404问题四、关闭Webpack的debug模式五、Vue项目打包发布后，使浏览器WebPack中无法查看源码 前言 本篇博客是关于Webpack打包vue的配置以及一些问题解决整理，若文章中出现相关问题

最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的。查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。也就是说实际应该通过 /static/fonts/ 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/，自然报 404 错误。...

1，问题描述 （1）element-ui 自带了一套常用的图标集合，使用起来十分方便。最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的： （2）而一旦使用 npm run build 编译打包后发布到服务器上，会发现图片显示不出来（Chrome 浏览器下显示方块）。 原文:Vue.js - 解决部署到服务器后Eleme...

最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的。查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/**，自然报 404 错误。

vue项目引用Element UI组件后，本地运行时，图标是正常显示的，但是打包部署后，图标不显示。

自己搭建的Vue项目，没有使用vue-cli，引入elementUI时提示字体图标404，找不到文件，如下错误：GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)在网上查了下解决办法，是因为elementUI的字体图标是.woff和.ttf格式的，在webpa...