¿Cómo puedo integrar Monaco con Vue.js?

npm install -s monaco-editorCreé una nueva aplicación vue y ejecuté , luego cambié mi App.vue para que se vea así:

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

Cuando ejecuto la aplicación, veo lo siguiente en la consola de 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

Intenté buscar el error, pero la mayoría de los hilos parecen centrarse en acceder a los archivos a través del archivo: /// que no estoy haciendo (estoy accediendo al servidor web de nodo).

Además, el editor no se procesa correctamente a menos que la altura se especifique explícitamente; no creo que sea un comportamiento esperado.

¿Cómo puedo hacer que monaco-editor funcione correctamente en Vue? Me gustaría evitar envoltorios de terceros no oficiales como https://github.com/egoist/vue-monaco si es posible por razones de soporte.

Node / Vue novato, ¡así que sé amable!

Mónaco accede a los trabajadores de manera file://predeterminada, pero no funciona en la web.

Debe reemplazarlo http://configurando MonacoEnviorment manualmente o utilizando Monaco Webpack Plugin .

Consulte los documentos oficiales

Intente especificar el webpackcomplemento monaco en la configuración de su paquete web:

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

...

plugins: [
  new monacoWebpackPlugin()
]

O instale monaco-editor-webpack-plugin e intente usar eso en su lugar:

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

...

plugins: [
  new monacoWebpackPlugin()
]

En cuanto a heighty width, puede escuchar el tamaño de la ventana y llamar editor.layout()o calcular el tamaño del contenedor y pasar el tamaño al editor.layout()método ⁽¹⁾ .

O puede probar algo de otras respuestas publicadas en hilos similares, por ejemplo:

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

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

body {
  margin: 0;
  padding: 0;
}

O algo como esto:

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