一、问题

ElementUI 本身是提供一个脚手架模板的,地址:

这个模板个人觉得相比 vue-cli 的 webpack-simple 模板更加实用,很多东西不用自己去搞。

当然,也很简单,没有 webpack 模板来的强大。

如果只是实用 webpack-simple 模板的话,在引入组件的时候会遇到一个错误:

1.jpg

这个错误如果看 node 的编译过程的话,能够发现:

2.jpg

是图标字体出现了问题, ttf 是无法打包的。

 二、解决

解决方法我是看了一下 ElementUI 的推荐模板 elementui-starter 的配置。

当然,elementui-starter 使用的是 url-loader ,我继续使用 webpack-simple 的 file-loader

在 处理图片的 file-loader 的配置上加上字体文件即可

{
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }