Vue环境差异化配置Babel求助：预发转ES5生产却输出ES6

核心排查方向 #

1. 检查Babel配置的环境分支 #

• 打开babel.config.js，确认是否存在基于process.env.NODE_ENV的分支逻辑，比如生产环境是否刻意设置了更高的目标语法（如esmodules: true）
• 临时添加日志验证：在配置文件顶部插入console.log('NODE_ENV:', process.env.NODE_ENV, 'BABEL_ENV:', process.env.BABEL_ENV)，执行生产构建时查看输出，确认加载的配置是否与预发环境一致

2. 验证Vue CLI生产构建的Babel集成 #

• 检查vue.config.js：
  • 确认未通过configureWebpack或chainWebpack移除/修改Babel loader规则，比如生产环境是否误删了.js/.ts文件的转译配置
  • 查看transpileDependencies是否仅在预发环境配置，生产环境遗漏导致源码或依赖未被转译
• 核对生产构建命令：确认package.json中生产构建命令（如vue-cli-service build）未添加跳过Babel的特殊参数

3. 检查TypeScript配置差异 #

• 确认生产环境是否使用独立的tsconfig.prod.json，其compilerOptions.target是否设为ES6而非ES5
• 检查tsconfig.json中module、lib配置，生产环境是否意外设置为ESNext导致输出未转译的语法

4. 依赖与构建环境验证 #

• 确认package.json中@babel/preset-env、@vue/cli-plugin-babel等核心依赖已正确安装（生产构建环境需确保依赖完整）
• 对比预发与生产环境的Node.js版本，避免因版本差异导致Babel行为不一致

常见修复示例 #

统一Babel目标配置 #

修改babel.config.js，确保所有环境使用相同的转译目标：

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      targets: {
        browsers: ['> 1%', 'last 2 versions', 'not dead'],
        node: 'current'
      }
    }]
  ]
}

修复Vue CLI的生产构建配置 #

如果vue.config.js中存在生产环境的错误配置，恢复Babel loader规则：

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 移除可能存在的Babel loader删除逻辑
      // 确保.js/.ts文件的转译规则正常保留
    }
  }
}

统一TypeScript编译目标 #

修改tsconfig.json的compilerOptions：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    // 其他配置...
  }
}

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