element-ui 字体图标显示为方块解决

今天打开自己做的element-ui的后台管理页面，发现element-ui的字体图标无法正常显示了，显示出来的都是小方块

1.png

之前是以为element里面用了没有的字体图标，重新写在安装后发现问题没有解决。之后查看css代码，伪元素是成功加载上去的，说明导入没有错误，翻阅资料最后应该确认在element-ui的font字体文件，通过webpack打包之后出现的问题
网上都说要在loader内更改test: /\.(woff|eot|ttf|otf)(\?.*)?$/i,原本是woff2，但是看element-ui > lib > theme-chalk内是没有woff2文件的。

2.png

这里需要通过更改webpack的配置，来解决问题。
因为使用的cli3的版本，需要在根目录下添加vue.config.js文件，这里还要使用，webpack-chain来进行链式设置。
之前一直搞不懂这个链式配置怎么使用，之后结合了vue inspect > webpack.test.js命令，可以生成一个普通的webpack配置文件，两者结合起来看就简单很多了

module.exports = {
  chainWebpack: config => {
    const imagesRule = config.module.rule('images')
    imagesRule.uses.clear()
    // 删除images的rule
    imagesRule.use('file-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        // 设置图片大小
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      })
    const fontsRule = config.module.rule('fonts')
    fontsRule.uses.clear()
    fontsRule.test(/\.(woff|eot|ttf|otf)(\?.*)?$/i)
    fontsRule.use('file-loader')
      .loader('url-loader')
      .options({
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]'
          }
        }
      })
  }
}

通过命令后就会在vue.config.js同级文件夹，生成一个webpack.test.js文件，上面的代码转换后，就是下面的内容。

 /* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          /* config.module.rule('images').use('file-loader') */
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
/* config.module.rule('fonts') */
      {
        test: /\.(woff|eot|ttf|otf)(\?.*)?$/i,
        use: [
          /* config.module.rule('fonts').use('file-loader') */
          {
            loader: 'url-loader',
            options: {
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },

这样对比起来就很好理解了

1. 首先要给需要设置的类型一个变量，后面调用更方便
2. 通过链式调用配置的方法，比如test和use是两个同级的，那么test就不能写在use下面，use下面的都是进入了use内部的配置
3. 如果配置很多的话可用end()来返回上一层，从use返回上一层后就可以继续写test了

把这两段写好之后，因为更改了配置文件，记得要重新npm run serve，之后字体图标就能很好显示了。自己一点个人理解，希望能帮到有需要的人

3.png