javascript - 如何将Monaco与Vue.js集成？

我创建了一个新的vue应用程序并运行npm install -s monaco-editor，然后将App.vue更改为如下所示:

<template>
    <div id="app" style="width: 500px; height: 500px;">
        <div ref="editor" style="width: 500px; height: 500px;"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  name: 'app',
  async mounted() {
    const el = this.$refs.editor;
    this.editor = monaco.editor.create(el, {
      value: "console.log('hello world');",
      language: 'javascript',
    });
  },
};
</script>

运行该应用程序时，在JavaScript控制台中看到以下内容:

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq simpleWorker.js:31
You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker 2 simpleWorker.js:33
Error: "Unexpected usage"
    loadForeignModule editorSimpleWorker.js:494
    _foreignProxy webWorker.js:54
languageFeatures.js:209
    _doValidate languageFeatures.js:209

我尝试搜索错误，但是大多数线程似乎都专注于通过file:///来访问文件，而我没有这样做(我正在访问节点Web服务器)。

此外，除非明确指定高度，否则编辑器将无法正确渲染-我认为这不是预期的行为。

如何使Monaco编辑器在Vue中正常工作？由于支持原因，我想避免使用非官方的第三方包装，例如https://github.com/egoist/vue-monaco。

Node/Vue新手，所以请保持友好!

最佳答案

摩纳哥默认情况下会通过file://来对工作人员进行配准，但它不适用于Web。
您应该通过手动设置MonacoEnvironment或使用ojita将它替换为http://。
请参阅Monaco Webpack Plugin