如何在Nuxt 3配置中添加Babel？转译代码失败问题求解

以下是几个实操解决方案，按优先级尝试：

• 调整Nuxt3的Babel配置方式
  Nuxt3默认用Vite/esbuild处理代码编译，不会自动启用Babel。如果需要自定义Babel规则，直接在nuxt.config.ts里配置即可，无需单独编写babel.config.js：

export default defineNuxtConfig({
  // 配置Babel预设和插件
  babel: {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime']
  },
  // 若需指定编译目标，可同时配置vite
  vite: {
    esbuild: {
      target: 'es2015'
    }
  }
})

• 确认Babel依赖已正确安装
  确保项目中安装了必要的Babel开发依赖：

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev

使用yarn或pnpm的话替换对应命令即可。

• 指定需要转译的第三方库
  如果是某个第三方包需要Babel转译，在nuxt.config.ts的build.transpile里添加该包：

export default defineNuxtConfig({
  build: {
    transpile: ['需要转译的包名', /node_modules\/特定包的正则/]
  }
})

这个配置会告诉Nuxt的构建工具去处理这些指定的代码。

• 移除冲突的旧配置
  如果之前Vue3项目遗留了babel.config.js，建议删除它，或者把配置内容迁移到nuxt.config.ts的babel字段里，避免和Nuxt的内置配置冲突。

• 强制用Babel替代esbuild
  如果必须依赖Babel而不是esbuild，可以禁用esbuild，强制启用Babel：

export default defineNuxtConfig({
  vite: {
    esbuild: false
  },
  babel: {
    presets: [
      ['@babel/preset-env', { targets: { browsers: 'last 2 versions' } }]
    ]
  }
})

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