vue中如何压缩图片

Vue中可以通过使用`image-webpack-loader`和`url-loader`插件来压缩图片。

1. 安装`image-webpack-loader`和`url-loader`插件：在项目根目录下运行命令`npm install image-webpack-loader url-loader --save-dev`。

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

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000, // 对小于10k的图片进行base64编码
              name: 'img/[name].[hash:7].[ext]' // 输出文件路径和名字
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true // 在debug模式下跳过压缩，加快构建速度
            }
          }
        ]
      }
    ]
  }
}

这样就可以对图片进行压缩了。其中，`url-loader`会对小于10k的图片进行base64编码，而`image-webpack-loader`会对大于10k的图片进行压缩。可以通过调整`limit`参数来控制需要进行base64编码的图片的大小阈值。