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设为'../../'再打包就可以了。