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

然后重新构建项目!

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
这个错误通常是因为 Element Plus 字体文件的路径设置不正确所导致的。Element Plus 默认使用了一些字体文件,如 `element-icons.ttf`,这些字体文件需要正确引入才能正常显示 Element Plus 的图标。 在你的项目中,你需要检查以下几个方面: 1. Element Plus 字体文件的路径设置是否正确 在 `element-variables.scss` 文件中,你需要正确设置 `$--font-path` 变量,指定 Element Plus 字体文件的相对路径。例如: ```scss $--font-path: '../fonts'; ``` 这个路径应该是相对于 `element-variables.scss` 文件所在的路径。 2. 确保 Element Plus 字体文件存在 你需要确保 `element-icons.ttf` 字体文件存在于 `$--font-path` 变量所指定的路径中。如果字体文件不存在,你需要重新下载 Element Plus 并将字体文件拷贝到 `$--font-path` 变量所指定的路径中。 3. 检查 webpack 配置文件 如果你使用的是 Vue CLI 4.x 或以上版本,你需要检查 `vue.config.js` 文件中是否正确配置了字体文件的加载规则。你可以在 `vue.config.js` 文件中添加以下代码: ```javascript module.exports = { chainWebpack: config => { config.module .rule('fonts') .test(/\.(ttf|otf|eot|woff|woff2)$/) .use('url-loader') .loader('url-loader') .tap(options => { // 修改它的选项... options.fallback.options.name = 'fonts/[name].[hash:8].[ext]' return options }) } } ``` 这个代码会告诉 Webpack 在加载字体文件时使用 `url-loader`,并将字体文件命名为 `fonts/[name].[hash:8].[ext]`。 总之,要解决这个错误,你需要确保 Element Plus 字体文件的路径设置正确,字体文件存在,以及 webpack 配置文件正确设置了字体文件的加载规则。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

C吴新科

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值