elementUI字体图标不显示 完美解决方案

使用vue init webpack-simple xxx 创建的项目

在使用ElementUI的时候使用 字体图标时提示

根据报错提示可以看出时无法处理element-icons.ttf文件

原因时什么呢？

相信大家都能够知道，这是因为webpack不知道怎么去处理.ttf的文件

这个时候我们就需要url-loader来帮助我们处理.ttf字体文件

1
//这个时候需要我们去执行npm命令去下载url-loader
2
npm/cnpm install url-loader --save

下载完成后 去过你尝试去npm run dev 你会发现还是报和上面相同的错误，这是为什么呢？

答案当然是因为你没有使用这个加载器（url-loader）

现在就需要你在webpack.config.js中去配置

这个配置说句实在的让小编好为难，因为一开始的时候咱也不知道该怎么配置啊，怎么办呢？

这个时候度娘就显现出来了强大的威力，我开始了百度，看到别人的博客，知道了在rules下配置如下信息

1
{
2
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
3
        loader: 'url-loader',
4
}

别急着运行你的项目———这里有坑

看图

此图 是配置信息

此图是运行结果

此时你会发现 不报错了 但是我的图标去哪了？

当时的小编也不知道啊 可能是被外星人给叼走了

哈哈 开个玩笑

经过小编的不懈努力 至于找到了问题的所在

这个因为没有设置limit选项

你可能会问这是什么东东

别急 先来和小编一起看看文档

看图可以看出 是要设置文件的大小的 这个属性的默认值是undefined

当然 小编怕你有疑问 再给你贴出一副图

这上面详细写了各个选项的具体功能

此时的你 应该已经很明确了问题原因的所在 和解决的办法

此时 就来看看我们伟大的成就吧

看图 配置

再来看运行的结果 如图：

此时，问题就完美解决了

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！