如何使用vue-monaco?

Question

我试图实现vue-monaco，但我得到这些错误:

ERROR  Failed to compile with 2 errors                                                                                                              4:59:58 PM
error  in ./node_modules/monaco-editor/esm/vs/basic-languages/_.contribution.js
Module parse failed: Unexpected token (37:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     return lazyLanguageLoaders[languageId];
|   }
>   _languageId;
|   _loadingTriggered;
|   _lazyLoadPromise;
@ ./node_modules/monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js 9:0-56 10:0-16
@ include-loader!./node_modules/vue-monaco/node_modules/monaco-editor/esm/vs/editor/editor.main.js
@ ./node_modules/vue-monaco/dist/vue-monaco.es.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PlaygroundView.vue?vue&type=script&lang=js&
@ ./src/views/PlaygroundView.vue?vue&type=script&lang=js&
@ ./src/views/PlaygroundView.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://X.X.X.X:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error  in ./node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js
Module parse failed: Unexpected token (76:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| })(ModuleResolutionKind || {});
| var LanguageServiceDefaultsImpl = class {
>   _onDidChange = new monaco_editor_core_exports.Emitter();
|   _onDidExtraLibsChange = new monaco_editor_core_exports.Emitter();
|   _extraLibs;
@ include-loader!./node_modules/vue-monaco/node_modules/monaco-editor/esm/vs/editor/editor.main.js 101:0-92
@ ./node_modules/vue-monaco/dist/vue-monaco.es.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PlaygroundView.vue?vue&type=script&lang=js&
@ ./src/views/PlaygroundView.vue?vue&type=script&lang=js&
@ ./src/views/PlaygroundView.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://X.X.X.X:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我认为这些问题与我的vue.config.js有关;

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

组件实现几乎与指南相同。这个指南看起来很简单，那么我做错了什么呢?

注:我甚至尝试了monaco-editor-vue，但我得到了几乎相同的错误。

Answer 1

为了使它工作，我不得不将monaco-editor-webpack-plugin降级到1.9.1;相关链接在这里。注意，typescript语言也是必需的，即使你只需要javascript;相关链接在这里