在这里记录一下这个bug
使用 SpringBoot + Vue + monaco 写项目的过程中出现了如下报错


问题就是Babel 配置缺少对类静态块的支持,因为在JavaScript中使用了类语法,但没有相应的Babel插件来转换这种高级语法特性。因为Babel默认只转换ES5语法,所以需要添加对应的Babel插件来实现转换。
但是我使用与其相同的环境并没有出现问题
解决方法如下:
安装 @babel/plugin-transform-class-static-block 模块
npm install @babel/plugin-transform-class-static-block
然后在该项目下的babel.config.js配置

plugins: ["@babel/plugin-transform-class-static-block"],
就能解决
还有一种方法是修改vue.config.js,添加Babel 插件
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack(config) {
config.plugin("monaco").use(new MonacoWebpackPlugin());
// 添加 Babel 插件
config.module
.rule('js')
.use('babel-loader')
.tap(options => {
options.plugins = options.plugins || [];
options.plugins.push('@babel/plugin-proposal-class-static-block');
return options;
});
},
});也能解决


