vue2 打包后阿里矢量图标icon失效

如果你使用的是阿里矢量图标库，那么在打包后可能是因为字体文件的路径不正确，导致 icon 无法显示。

解决方法：

1. 确认字体文件路径是否正确

在打包后的文件中，查看字体文件的路径是否正确。可以使用 Chrome 开发者工具检查网页的源代码和网络请求。

2. 配置 webpack

如果字体文件的路径不正确，可以在 webpack 的配置文件中添加相应的配置项，将字体文件的路径指向正确的位置。具体方法如下：

在 webpack 的配置文件中添加以下代码：

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

其中，`utils.assetsPath` 是一个工具函数，用于生成相应的路径。

3. 修改阿里矢量图标库的图标文件路径

在阿里矢量图标库中，可以通过修改相应的图标文件路径，来解决字体文件路径不正确的问题。具体方法如下：

在引用阿里矢量图标库的代码中，将 `iconfont.js` 文件的路径修改为相对于打包后的文件的正确路径。例如：

<!-- index.html -->
<script src="./static/fonts/iconfont.js"></script>

其中，`./static/fonts/` 是打包后的字体文件路径。

希望以上解决方法能够帮助你解决问题。