如何使用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；相关链接这里。请注意，即使您只需要 javascript，也需要 Typescript 语言；相关链接这里.