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设为'../../'再打包就可以了。
 
 
原文地址:https://www.cnblogs.com/EassieLee/p/11289521.html