elementUI中icon在webpack打包后不显示的问题

最近在项目中遇到elementUI中icon在webpack打包后不显示的问题,记录一下解决方案。

本项目使用的是webpack的MiniCssExtractPlugin进行打包,我看网上很多都是ExtractTextPlugin的解决方法,但是ExtractTextPlugin在webpack4中会有点问题,所以现在基本都是使用MiniCssExtractPlugin。

在build/webpack.base.conf.js中

module:{

  rules: [ 

    ...(config.dev.useEslint ? [createLintingRule()] : []),

    

    {

      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

      loader: 'url-loader',

      options: {

        limit: 10000,

        publicPath: '../../',

        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

      }

    }

  ]  

}

因为打包后woff、eot、ttf、otf的路径找不到才导致404,所以将这几个的publicPath设为'../../'再打包就可以了。