vue-cli3打包时图片压缩处理方式

关于“vue-cli3打包时图片压缩处理方式”的完整攻略，我们可以采用如下两个步骤来实现：

第一步：安装相关依赖

为了实现图片的压缩处理，我们需要安装相关的依赖包，具体步骤如下：

1.1 安装imagemin-webpack-plugin

npm install --save-dev imagemin-webpack-plugin

这里使用了npm工具安装了imagemin-webpack-plugin插件，该插件可用于在webpack构建图片时对图片进行压缩处理。

1.2 安装imagemin-mozjpeg

npm install --save-dev imagemin-mozjpeg

这里再次使用npm工具安装了imagemin-mozjpeg插件，该插件用于压缩jpeg格式的图片。

1.3 安装imagemin-pngquant

npm install --save-dev imagemin-pngquant

通过npm工具安装imagemin-pngquant插件，该插件用于压缩png格式的图片。

第二步：配置webpack生产模式下的图片压缩处理

为了在webpack构建打包时让它自动进行图片压缩处理，我们需要对vue.config.js文件进行配置。具体操作步骤如下：

2.1 在vue.config.js中进行图片压缩处理配置

const ImageminPlugin = require('imagemin-webpack-plugin').default
const ImageminMozjpeg = require('imagemin-mozjpeg')
const ImageminPngquant = require('imagemin-pngquant')

module.exports = {
    configureWebpack: {
        plugins: [
            new ImageminPlugin({
                test: /\.(jpe?g|png|gif|svg)$/i,
                plugins: [
                  ImageminMozjpeg({
                    quality: 80,
                    progressive: true,
                  }),
                  ImageminPngquant({
                    quality: [0.6, 0.8]
                  })
                ]
            }),
        ]
    }
}

首先，将相关插件导入，并在configureWebpack配置项中添加plugins。其中，ImageminPlugin插件是用于压缩图片的主要插件，其中的test属性用于指定需要进行压缩处理的图片格式（这里包括了常规的jpg、png、gif、svg等格式）；plugins属性用于指定使用哪些具体的图片压缩方式，这里我们使用了上述安装的imagemin-mozjpeg和imagemin-pngquant插件。

2.2 在npm run build时进行压缩处理

我们还需要在package.json中的scripts配置项下，对npm run build的执行过程进行配置，以使它在执行打包构建命令时能够进行图片压缩处理：

"scripts": {
    "build": "vue-cli-service build"
}

将上述scripts配置项修改为如下所示即可：

"scripts": {
    "build": "npm run build-imagemin",
    "build-imagemin": "vue-cli-service build"
}

这里，默认执行npm run build时实际上是在执行具体的build-imagemin命令，该命令会执行vue-cli-service build，并在构建时进行图片压缩处理。

示例说明

示例1

假设你的项目中有一张图片，路径为/src/assets/img/logo.png。在打包构建时，可以通过如下命令进行压缩：

npm run build-imagemin

如果已经配置好相应的依赖包，该命令会自动对/src/assets/img/logo.png进行压缩，最终生成的图片在/dist/img/logo.png路径下。

示例2

我们还可以针对具体的vue组件中的图片进行压缩处理，例如下面这个组件：

<template>
  <div>
    <img src="./assets/img/banner.jpg" alt="banner"/>
  </div>
</template>

<script>
  export default {
    name: 'Banner',
    data() {
      return {}
    }
  }
</script>

<style scoped>
  img {
    width: 100%;
  }
</style>

该组件中引用了./assets/img/banner.jpg这个图片路径，如果要对它进行压缩处理，只需要进行以下操作：

• 在vue.config.js配置文件中引入相关的插件
• 在configureWebpack配置项中添加相应的插件配置
• 执行npm run build-imagemin打包命令

执行上述流程后，打包过后的图片会自动添加到/dist目录下，组件中的<img>标签会自动使用经过压缩处理后的图片。