集成vue-monaco遇webpack编译错误，求解决方案

错误原因 #

你遇到的编译错误源于monaco-editor源码使用了类字段声明、类属性初始化这类ES6+语法，但Vue CLI默认不会转译node_modules目录下的依赖包，导致Babel未处理这些代码，Webpack无法解析该语法。

解决方案 #

修改vue.config.js，将monaco-editor和vue-monaco加入transpileDependencies列表，让Babel转译这些依赖的代码：

const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  transpileDependencies: [
    'vuetify',
    'monaco-editor',
    'vue-monaco'
  ],
  configureWebpack: {
    plugins: [
      new MonacoEditorPlugin({
        languages: ['javascript', 'typescript']
      })
    ],
  },
}

补充说明 #

• 若使用monaco-editor-vue，需将monaco-editor-vue也加入transpileDependencies列表
• Vue CLI创建的项目默认已包含@babel/plugin-proposal-class-properties等必要Babel插件，无需额外安装

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