安装vue-table-with-tree-grid后出现Terser Plugin配置报错，该如何解决？

问题根因 #

本次报错和vue-table-with-tree-grid插件本身无直接关联，属于项目依赖版本不兼容导致：

• 项目中安装的@vue/cli-service为4.5.x版本，该版本默认适配Webpack 4，调用内置的terser-webpack-plugin时会传递顶层cache配置项
• 你额外手动安装了Webpack 5.x版本，Webpack 5自带的terser-webpack-plugin为v5及以上版本，该版本已移除顶层cache配置属性，配置校验不通过就会抛出对应报错。

解决方案 #

可按优先级选择以下方案处理：

方案1：移除额外安装的Webpack 5（最适配Vue CLI 4.x，推荐） #

Vue CLI 4.5.x本身已内置适配的Webpack 4版本，无需手动安装Webpack 5，执行以下操作即可修复：

• 卸载项目中手动安装的Webpack 5

npm uninstall webpack --save-dev

• 删除项目根目录下的node_modules文件夹和package-lock.json（yarn环境删除yarn.lock）
• 重新安装依赖

npm install

• 重新运行项目即可恢复正常。

方案2：升级Vue CLI到5.x适配Webpack 5 #

如果你需要使用Webpack 5的特性，可以把Vue CLI相关依赖升级到5.x版本：

npm update @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router --save-dev

升级完成后重新运行项目即可。

方案3：手动修改Terser配置兼容 #

如果不想修改依赖版本，可以在项目根目录的vue.config.js（不存在则新建）中添加以下配置，手动修正Terser的参数：

module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      // 移除不兼容的顶层cache配置
      delete args[0].cache
      return args
    })
  }
}

保存后重新运行项目即可。

内容的提问来源于stack exchange，提问作者ymtx