【Vue+elementUI 】build打包部署后字体图标丢失问题

npm run dev字体图标正常显示，但是，，，，

npm run build后字体图标消失，见下图：

解决方法：

webpack module配置：(build目录下webpack.base.conf.js)
添加
…(config.dev.useEslint ? [createLintingRule()] : []),

module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

webpack utils.js 修改：（build目录下utils.js）

添加 publicPath: ‘…/…/’

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}

完美Ending~

来源:

原文章地址:点击==>https://zhuanlan.zhihu.com/p/97557847
侵联删