VUE Element-ui 图标加载失败问题 Failed to decode downloaded font : woff ttf

最新推荐文章于 2024-05-11 17:07:22 发布

努力赚钱养猫咪i

最新推荐文章于 2024-05-11 17:07:22 发布

阅读量4.3k

点赞数 4

文章标签： vue icons webpack 前端 css

本文链接：https://blog.csdn.net/weixin_42061364/article/details/106337233

版权

本文针对Vue项目中Element-UI图标加载失败的问题进行探讨，常见解决方案包括调整assetsPublicPath和修改style-loader配置。然而，当这些常规方法无效时，问题可能源于webpack规则。通过修改webpack.base.conf.js中关于字体文件的处理规则，成功解决了woff和ttf文件无法下载的问题，实现了图标正常显示。

摘要由CSDN通过智能技术生成

最近重新搭建一个vue+element-ui的项目，使用的时候出现这么个问题，element的样式引用正常，但是图标显示是一个小方块 报错信息如下：

在这里插入图片描述
在网上找了很多解决办法，普遍方法都是修改assetsPublicPath等等，我们首先看下：
## 1.路径问题，设置assetsPublicPath
vue-cli项目中 config文件下的index.js assetsPublicPath属性默认为 ‘/’

修改为 assetsPublicPath:’./’ 修改后配置如下
在这里插入图片描述
## 2.style-loader问题
修改build文件下 utils.js 文件 publicPath，修改后配置如下：

**