Node14环境下Vue2项目使用可选链语法报Unexpected Token错误

核心原因 #

当前项目@vue/cli-service@3.x和@vue/cli-plugin-babel@4.x大版本不兼容，导致手动配置的Babel可选链插件未被正确加载，未转译的可选链语法交给webpack4解析时无法识别，抛出Unexpected token错误。

解决步骤 #

• 修复CLI依赖版本不兼容问题
  将@vue/cli-plugin-babel降级到和@vue/cli-service一致的3.x版本，执行命令：

  npm install @vue/cli-plugin-babel@3.12.1 --save-dev
  

• 调整Babel配置
  检查项目根目录的babel.config.js，确保配置如下：

  module.exports = {
    presets: [
      '@vue/app'
    ],
    plugins: [
      // 可选链转译插件
      "@babel/plugin-proposal-optional-chaining",
      // 可选添加：空值合并运算符??转译插件，按需引入
      "@babel/plugin-proposal-nullish-coalescing-operator"
    ]
  }
  

• 清除缓存重启项目
  Vue CLI会默认缓存loader处理结果，需要清除缓存后启动才会加载新配置：

  # 方法1：启动时直接指定不使用缓存
  npm run serve -- --no-cache
  
  # 方法2：手动删除缓存文件夹（Windows系统请手动删除node_modules下的.cache文件夹）
  rm -rf node_modules/.cache
  

Babel版本验证方法 #

直接在项目根目录执行以下命令，输出7.x版本即说明项目正在使用Babel7：

npx babel --version

项目内的依赖优先级高于全局安装的包，不需要卸载全局的Babel6，不会对当前项目产生影响。

提示：如果后续需要升级CLI工具，建议将所有@vue/cli-开头的依赖统一升级到同一大版本，升级前提交代码到Git仓库，出现异常可直接回滚，不会破坏现有项目。

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