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

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

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

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

原因时什么呢？

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

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

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

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

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

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

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

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

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

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

看图

此图 是配置信息

此图是运行结果

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

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

哈哈 开个玩笑

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

这个因为没有设置**limit**选项

你可能会问这是什么东东

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

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

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

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

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

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

看图 配置

再来看运行的结果 如图：

此时，问题就完美解决了

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

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

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

让我们共同加油吧！！！