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

C吴新科2024-02-29 20:09

css下载地址： https://unpkg.com/[email protected]/lib/theme-chalk/index.css

js下载地址： https://unpkg.com/[email protected]/lib/index.js

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

element-icons.woff:：

https://unpkg.com/[email protected]/lib/theme-chalk/fonts/element-icons.woff

element-icons.ttf：

https://unpkg.com/[email protected]/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>

然后重新构建项目！