下载element-ui 资源,图标 element-icons.woff,element-icons.ttf 无法解码文件字体

css下载地址: https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css

js下载地址: https://unpkg.com/element-ui@2.15.14/lib/index.js

图标及文字文件下载地址:

element-icons.woff::

​ https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/fonts/element-icons.woff ​

element-icons.ttf:

https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/fonts/element-icons.ttf

访问项目发现icon图标无法现在!

浏览器控制台报错:

Failed to decode downloaded font: http://localhost:8080/demo/css/ui/element/fonts/element-icons.woff

报错原因:Maven构建过程中,默认会对资源文件过滤处理,有些文件内容或字体被Maven处理之后不能正常解析。

解决方式:

在pom.xml文件中添加 maven-resources-plugin 插件

复制代码
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>2.6</version>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ico</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
        <encoding>UTF-8</encoding>
    </configuration>
</plugin>

然后重新构建项目!

相关推荐
砚底藏山河2 小时前
量化实战:行情数据 Schema 演进与向后兼容
java·python·金融·maven
雪芽蓝域zzs21 小时前
第6节:远程搜索弹窗(remote 模式),弹窗滚动加载分页
vue.js·elementui
雪芽蓝域zzs2 天前
第4节:el-select 弹窗事件控制(打开 / 关闭、选中事件、弹窗滚动事件)
vue.js·elementui
ss2732 天前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
程序猿乐锅2 天前
【黑马点评 | 第十一篇】关注 Feed 流实现
java·数据库·redis·分布式·后端·缓存·maven
雪芽蓝域zzs2 天前
第3节:el-select 弹窗定位、滚动穿透与挂载容器(popper-append-to-body /teleported)
vue.js·elementui
java_nnnn2 天前
Spring Boot 快速上手:从 Maven 到第一个 Controller
java·spring·java-ee·maven
雪芽蓝域zzs2 天前
第 2 节:基础扩展 - 下拉弹窗常用原生属性
vue.js·elementui
光年20003 天前
Mock-Server开箱即用的Mock服务
java·maven·mock·jetty
雪芽蓝域zzs3 天前
Vue3 + Element Plus el-select 下拉弹窗
vue.js·elementui