vue2设置图片打包规则

在Vue2项目中，设置图片打包规则通常是为了优化静态资源的加载速度，特别是在使用Webpack构建工具时。以下是常见的图片处理步骤：

1. 安装依赖：首先，你需要安装`vue-cli-plugin-vuetify`（如果使用Vuetify）和`webpack-contrib-img-loader`等用于处理图片的插件。

npm install --save-dev vue-cli-plugin-vuetify webpack-contrib-img-loader imagemin-webpack-plugin

2. 配置Webpack：在`.vue`单文件组件的`build`目录下找到`webpack.config.js`，并在`chainWebpack`配置项中添加图片处理规则。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeImagesPlugin = require('optimize-images-webpack-plugin');

module.exports = {
  // ...
  chainWebpack(config) {
    config.module.rule('images')
      .use('img-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 80 }, // 使用JPEG压缩选项
        optipng: { enabled: true, optimizationLevel: 7 }, // 使用PNG压缩选项
        pngquant: { quality: [0.65, 0.9], speed: 4 }, // PNG压缩选项
        svgo: { plugins: [{ removeViewBox: false }] } // SVG压缩选项
      })
      .end()
      .tap(options => ({
        // 添加OptimizeImagesPlugin，用于进一步压缩图片
        optimize: new OptimizeImagesPlugin({
          disable: process.env.NODE_ENV !== 'production', // 生产环境开启优化
          pngquant: {
            quality: [0.65, 0.9],
            speed: 4
          }
        })
      }));
  },
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    // 如果使用Vuetify，需要添加这个插件来处理Vuetify的图标
    new VuetifyPlugin()
  ]
};

3. 环境变量控制：在生产环境中，确保`NODE_ENV`环境变量设置为`production`，这将启用上述优化图片的配置。