Vite图片压缩(vite-plugin-imagemin) imagemin error: XXXX解决办法

最新推荐文章于 2025-03-31 10:13:36 发布

lemon丶csdn

最新推荐文章于 2025-03-31 10:13:36 发布

阅读量1.4w

点赞数 4

分类专栏： Vite 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43806604/article/details/124732352

版权

Vite 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在使用vite-plugin-imagemin时遇到的imagemin错误及解决方法，包括通过yarn的package.json配置、修改npm的host文件以及使用cnpm的替代方案。此外，还提供了Vite配置和优化方案，以减少重复图片压缩导致的长时间等待问题，提高打包效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 安装 vite-plugin-imagemin（yarn or npm）

node version: >= 12.0.0

vite version: >=2.0.0

yarn add vite-plugin-imagemin -D

npm i vite-plugin-imagemin -D

2 imagemin error:XXXXX

因为imagemin在国内不好安装，所以提供几个解决方案

1）使用yarn在package.json内配置（推荐）

"resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
}

2）使用npm，在电脑host文件加上以下配置

199.232.4.133 raw.githubusercontent.com

3）使用cnpm （不推荐）

3 使用方法

vite.config.ts 配置

import viteImagemin from 'vite-plugin-imagemin'
import { join, resolve } from 'path'
import vue from '@vitejs/plugin-vue'

export default ({ mode }: ConfigEnv): UserConfigExport => {
  return defineConfig({
    plugins: [
      vue(),
      viteCompression({
        ext: '.gz',
        algorithm: 'gzip',
        deleteOriginFile: false
      })
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      })
    ],
    resolve: {
      alias: [{ find: '@', replacement: resolve(__dirname, './src') }]
    },
    build: {
      target: 'es2015',
      outDir: 'dist',
      rollupOptions: {
        output: {
          manualChunks: {
            echarts: ['echarts']
          }
        }
      }
      // assetsDir: 'assets'
    }
  })
}