最近在項目中遇到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設為'../../'再打包就可以了。