vuecli2项目移植到cli4项目中，问题：'imagemin-gifsicle'

Question

vuecli2项目移植到cli4项目中。
本地运行没有问题，build打包报错，问题：Error: Cannot find module 'imagemin-gifsicle'。
vue.config.js配置如下：

// vue.config.js
const path = require('path');
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
module.exports = {
  publicPath: "./", // 默认'/'，部署应用包时的基本 URL
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  outputDir: 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  chainWebpack: config => {
    config.resolve.symlinks(true); // 修复热更新失效
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@tools', resolve('src/tools'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@jsonData', resolve('src/jsonData'));
    // 压缩图片
    if (IS_PROD) {
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false }
          // webp: { quality: 75 }
        });
    }
    // 配置全局less
    const oneOfsMap = config.module.rule("less").oneOfs.store;
      oneOfsMap.forEach(item => {
        item
          .use("style-resources-loader")
          .loader("style-resources-loader")
          .options({
            // or an array : ["./path/to/vars.less", "./path/to/mixins.less"] 这里的路径不能使用@，否则会报错
            patterns: "./src/assets/css/style/default.less"
          })
          .end()
      })
  },
  // 去掉console.log
  configureWebpack: config => {
    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  devServer: {
    open: true, // 是否打开浏览器
  }

}

Answer 1

node_modules删掉，重新安装一下依赖