element UI在webpack打包后图标不显示的问题

https://www.cnblogs.com/EassieLee/p/11289521.html

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

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

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

下面说一下ExtractTextPlugin的解决方案

config文件夹下index.js文件中build 改成 assetsPublicPath: './',

build文件夹下webpack.prod.conf.js文件改成
output: {
publicPath: './',
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

build文件夹下utils.js中添加如下：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //添加部分
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}