Vue3项目npm run serve编译失败，export类属性处报Unexpected token错误

错误根因 #

你遇到的报错是类公共字段语法（ES2022新增特性，支持直接在class内部声明并初始化属性，无需写在constructor中）未被Babel转译导致的。你当前使用的Vue CLI 4.x自带的Babel默认配置未包含该语法的转译插件，因此babel-loader无法识别User类中的userId = ""这类写法，抛出解析失败错误。

修复步骤 #

• 第一步：安装对应Babel转译插件
  执行命令：
  npm install --save-dev @babel/plugin-proposal-class-properties
• 第二步：修改项目根目录下的babel.config.js配置文件，新增插件配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增以下plugins配置
  plugins: [
    '@babel/plugin-proposal-class-properties'
  ]
}

• 第三步：清除本地构建缓存后重启服务
  直接删除项目下node_modules/.cache文件夹，再执行npm run serve启动即可。

补充说明 #

如果修改后仍报错，可检查新设备的依赖安装是否完整，执行rm -rf node_modules package-lock.json && npm install重新安装全量依赖后再启动服务。
之前的设备可正常运行，大概率是旧设备Node版本更高原生支持该ES特性，或旧设备本地安装过对应依赖未同步到package.json导致。

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