Vue2/Nuxt2集成Ag-Grid遇报错求助：模块缺失与类构造函数调用异常

Hey，我刚踩过类似的坑，给你几个针对性的解决方案，应该能搞定你的问题：

问题根源拆解 #

你碰到的两个错误其实是连锁反应：

1. 第一个vue-class-component缺失报错，是因为ag-grid-vue的部分依赖依赖了这个包，但你的项目初始没安装；
2. 装完后出现的类构造函数错误，核心原因是Vue2 + Babel的默认转译配置没处理好ES6类的继承逻辑，导致Ag-Grid内部的类组件无法被正确实例化。

分步解决办法 #

1. 降级Ag-Grid版本（简单省心的方案） #

Ag-Grid 30.x版本对Vue2的选项式API支持有点水土不服，如果你不想折腾配置，可以降级到更稳定的28.x版本，这个版本对Vue2兼容性更好：

npm uninstall ag-grid-community ag-grid-vue
npm install ag-grid-community@28.2.1 ag-grid-vue@28.2.1

2. 修复Babel转译配置（想保留30.x版本的话） #

在Vue2项目里，要确保Babel能正确转译第三方库的ES6类，你需要修改babel.config.js（没有的话就新建一个）：

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'usage',
      corejs: 3,
      // 关键配置：启用类的松散模式转译，解决构造函数调用问题
      loose: true
    }]
  ],
  // 强制转译Ag-Grid相关依赖，避免未转译的ES6语法导致报错
  transpileDependencies: ['ag-grid-vue', 'ag-grid-community']
}

3. Nuxt2项目的额外配置 #

如果是Nuxt2环境，还需要在nuxt.config.js里添加转译规则：

export default {
  build: {
    transpile: ['ag-grid-vue', 'ag-grid-community']
  }
}

4. 样式导入的小调整 #

你的App.vue里的样式导入可以改得更稳妥，避免路径解析问题：

@import 'ag-grid-community/styles/ag-grid.css';
@import 'ag-grid-community/styles/ag-theme-alpine.css';

5. 清理冗余依赖（可选） #

你的代码用的是Vue2选项式API，其实不需要vue-class-component和vue-property-decorator，这两个包反而可能和Ag-Grid的内部实现冲突，直接卸载就行：

npm uninstall vue-class-component vue-property-decorator

验证步骤 #

1. 删除node_modules和package-lock.json（或yarn.lock）；
2. 重新执行npm install；
3. 启动项目（Vue CLI用npm run serve，Nuxt用npm run dev）；
4. 打开开发者工具检查报错，同时看Ag-Grid是否正常渲染。

备注：内容来源于stack exchange，提问作者uli