Vue2中使用带静态属性的JS类编译失败问题排查

问题原因 #

你使用的static testVar = "test"属于类字段语法，这是ECMAScript的提案级特性，并非ES6标准语法；而静态方法static test() {}是ES6标准中定义的类语法，Vue2默认的Babel配置已经支持ES6标准语法，但未启用类字段提案的转译逻辑，导致webpack无法解析该语法，从而抛出编译错误。

解决方案 #

方案1：配置Babel支持类字段语法 #

1. 安装所需Babel插件
   在项目终端执行以下命令：

   npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods
   

2. 修改Babel配置文件
   打开项目根目录的babel.config.js（若不存在则新建），添加插件配置：

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ],
     plugins: [
       '@babel/plugin-proposal-class-properties',
       '@babel/plugin-proposal-private-methods'
     ]
   };
   

3. 重启开发服务器
   关闭当前的Vue开发服务，重新启动后配置即可生效，类静态属性就能正常编译。

方案2：使用ES6标准语法替代类字段 #

无需修改Babel配置，直接在类外部赋值静态属性，这是ES6标准支持的写法：

export class TestUnit {
}
TestUnit.testVar = "test";

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