为什么Vue项目用Babel编译后出现regeneratorRuntime未定义错误？

萌新.海利提问于 2026-01-27 13:23:21 阅读 36

工具

在Vue组件里用了async/await写法，按照教程配置了bable.config.js，但打包时报错‘regeneratorRuntime is not defined’。已经装了@babel/runtime-corejs3和regenerator-runtime，但问题依旧。

这是我的组件代码：



  {{ result }}



export default {
  data() {
    return { result: '' }
  },
  async created() {
    this.result = await somePromise()
  }
}

babel配置里用了preset-env和runtimeHelpers，但没加@babel/plugin-transform-runtime插件。这种情况下应该怎么正确配置？

我来解答赞 8 收藏

反馈

2 条解答

Top丶芸菡 Lv1

async/await需要regeneratorRuntime支持，你的Babel配置漏了关键项。直接这样改：

安装依赖：
npm install --save regenerator-runtime
npm install --save @babel/runtime-corejs3

修改babel.config.js：
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3
}]
],
plugins: [
['@babel/plugin-transform-runtime', {
corejs: 3
}]
]
}

在入口文件main.js顶部加：
import "regenerator-runtime/runtime

2026-02-05 12:14

司空玉英 Lv1

嗯，这个问题挺常见的，尤其是用了async/await的时候。你确实需要装 @babel/plugin-transform-runtime 这个插件，并且在 Babel 配置里加上它。

直接说解决方案吧。先把插件装上：

npm install --save-dev @babel/plugin-transform-runtime

然后在你的 babel.config.js 里面加上这个插件的配置，像这样：

module.exports = {

  presets: [

    ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]

  ],

  plugins: [

    ['@babel/plugin-transform-runtime', {

      regenerator: true, // 这个一定要加上！

      corejs: 3

    }]

  ]

};

重点是 regenerator: true，这个选项会确保 Babel 正确注入 regeneratorRuntime。如果你之前没加这个选项，就会出现你说的那个错误。

最后别忘了重启下构建工具，重新打包试试。应该就没问题了。说实话，Babel 的配置有时候真让人头大，不过这种坑踩过一次就记得死死的了。

2026-01-29 09:20