vue 引入字体图标显示方块

问题现象：

使用element-ui，字体图表显示“方块”。
项目加载后，看加载文件，并没有.woff或.woff2或.ttf等字体图标文件。
也没有字体图表转换后的base64，文件。

环境；

webpack4，vue2

有问题的代码：

webpack.base.conf.js:

 module: {
        rules: [
        	          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                  // name: './fonts/[name].[hash:7].[ext]'
                }
              }
            ]
          }
     ]
 }

util.js

exports.assetsPath = function (_path) {
    const assetsSubDirectory = process.env.NODE_ENV === 'development'
        ? config.dev.assetsSubDirectory
        : config.build.assetsSubDirectory
    return path.posix.join(assetsSubDirectory, _path)
}

.woff 文件在之前webpack3时，可以转换为base64图正常显示字体图标，升级webpac4后，就加载不出来了。

修改后的配置：

webpack.base.conf.js:

          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  // 修改如下：
                  name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
                  esModule: false
                }
              }
            ]
          },

webpack4中，需要在url-loader配置esModule:false

esModule: false
作用： url-loader默认使用es6模块化解析，而html-withimg-loader引入图片是使用commonjs模块，所以要关闭url-loader的es6模块化解析，使用commonjs解析，false为关闭，true为默认值。
注意：webpack4中只需要在url-loader配置esModule，而在webpack5需要html-loader也要配置

esModule
类型：Boolean 默认：true
默认情况下，css-loader 生成使用 ES 模块语法的 JS 模块。 在某些情况下，使用 ES 模块是有益的，例如在模块串联或 tree shaking 时。
您可以使用以下方式启用ES模块语法：
webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          esModule: false,
        },
      },
    ],
  },
};