下载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>

然后重新构建项目!

相关推荐
北辰浮光4 小时前
[Element-plus]动态设置组件的语言
javascript·vue.js·elementui
匚WYHaovous5 小时前
Maven项目JAR定位
maven
胡斌附体1 天前
elementui cascader 远程加载请求使用 选择单项等
前端·javascript·elementui·cascader·可独立选中单节点
熊猫片沃子1 天前
Maven在使用过程中的核心知识点总结
java·后端·maven
小离a_a2 天前
el-tree方法的整理
前端·vue.js·elementui
草履虫建模2 天前
RuoYi-Cloud 微服务本地部署详细流程实录(IDEA + 本地 Windows 环境)
java·spring boot·spring cloud·微服务·云原生·架构·maven
penngo2 天前
Maven/Gradle常用命令
java·gradle·maven
code_txy3 天前
element plus table 表格操作列根据按钮数量自适应宽度
elementui
Jinkxs4 天前
高级15-Java构建工具:Maven vs Gradle深度对比
java·开发语言·maven
阿奇__4 天前
深度修改elementUI样式思路
前端·vue.js·elementui