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サーバーにアクセスしています））。

さらに、高さが明示的に指定されていない限り、エディターは正しくレンダリングされません。これは予想される動作ではないと思います。

Vueでモナコエディターを正しく機能させるにはどうすればよいですか？サポートの理由で可能であれば、https：//github.com/egoist/vue-monacoなどの非公式なサードパーティのラッパーは避けたいです。

Node / Vueの初心者です。

モナコfile://はデフォルトでワーカーにアクセスしますが、Webでは機能しません。

http://手動でMonacoEnviormentを設定するか、Monaco Webpack Pluginを使用して置き換える必要があります。

公式ドキュメントを参照してください

webpackwebpack設定でモナコプラグインを指定してみてください：

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

...

plugins: [
  new monacoWebpackPlugin()
]

または、monaco-editor-webpack-pluginをインストールして、代わりにそれを使用してみてください：

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

...

plugins: [
  new monacoWebpackPlugin()
]

heightおよびについてはwidth、ウィンドウのサイズ変更をリッスンして呼び出すeditor.layout()か、またはコンテナーサイズを計算してサイズをeditor.layout()メソッド^（1）に渡すことができます。

または、同様のスレッドで他の投稿された回答から何かを試すことができます。次に例を示します。

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

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

body {
  margin: 0;
  padding: 0;
}

またはこのようなもの：

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