Wie kann ich Monaco in Vue.js integrieren?

Ich habe eine neue Vue-Anwendung erstellt und ausgeführt npm install -s monaco-editor. Dann habe ich meine App.vue so geändert, dass sie folgendermaßen aussieht:

<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>

Wenn ich die Anwendung ausführe, wird in der JavaScript-Konsole Folgendes angezeigt:

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

Ich habe versucht, nach dem Fehler zu suchen, aber die meisten Threads scheinen sich auf den Zugriff auf Dateien über file: /// zu konzentrieren, was ich nicht tue (ich greife auf den Knoten-Webserver zu).

Außerdem wird der Editor nur dann korrekt gerendert, wenn die Höhe explizit angegeben ist. Ich glaube nicht, dass dies das erwartete Verhalten ist.

Wie kann ich dafür sorgen, dass Monaco-Editor in Vue korrekt funktioniert? Ich möchte inoffizielle Wrapper von Drittanbietern wie https://github.com/egoist/vue-monaco nach Möglichkeit aus Supportgründen vermeiden .

Node / Vue-Neuling, also sei bitte nett!

Monaco greift file://standardmäßig auf Mitarbeiter zu , arbeitet jedoch nicht im Web.

Sie sollten es http://durch ersetzen, indem Sie MonacoEnviorment manuell einstellen oder das Monaco Webpack Plugin verwenden .

Siehe die offiziellen Dokumente

Geben Sie das Monaco- webpackPlugin in Ihrer Webpack-Konfiguration an:

const monacoWebpackPlugin = require('monaco-editor/webpack')

...

plugins: [
  new monacoWebpackPlugin()
]

Oder installieren Sie das Monaco-Editor-Webpack-Plugin und versuchen Sie es stattdessen:

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

...

plugins: [
  new monacoWebpackPlugin()
]

Für das heightund widthkönnen Sie entweder die Fenstergröße anhören und aufrufen editor.layout()oder die Containergröße berechnen und die Größe an die editor.layout()Methode ^{(1) übergeben} .

Oder Sie können etwas aus anderen geposteten Antworten in ähnlichen Threads ausprobieren, zum Beispiel:

<div ref="editor" class="monaco-editor"></div>

.monaco-editor {
  height: 100vh;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
}

Oder so ähnlich:

.monaco-editor {
  position: absolute; 
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%; 
  max-height: 100% !important;
  margin: 0; 
  padding: 0;
  overflow: hidden;
}