Vue项目打包后icon图标不显示

原因一:路径错误

也就是说实际应该通过 /static/fonts/ 路径来获取字体图标,而实际却是请求 /static/css/static/fonts/,自然报 404 错误。

在build/utils.js找到以下代码

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

改为

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

增加

‘ publicPath:'../../'

字体图标文过大

在 build/webpack.base.config.js

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

你可能感兴趣的:(vue)