Làm cách nào tôi có thể tích hợp Monaco với Vue.js?

Tôi đã tạo một ứng dụng vue mới và chạy npm install -s monaco-editor, sau đó tôi đã thay đổi App.vue của mình thành như sau:

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

Khi tôi chạy ứng dụng, tôi thấy các mục sau trong bảng điều khiển 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

Tôi đã thử tìm kiếm lỗi nhưng hầu hết các luồng dường như tập trung vào việc truy cập tệp qua tệp: /// mà tôi không làm (Tôi đang truy cập máy chủ web nút).

Ngoài ra, trình chỉnh sửa không hiển thị chính xác trừ khi chiều cao được chỉ định rõ ràng - Tôi không nghĩ đó là hành vi dự kiến.

Làm cách nào để làm cho trình soạn thảo monaco hoạt động chính xác trong Vue? Tôi muốn tránh các trình bao bọc của bên thứ ba không chính thức như https://github.com/egoist/vue-monaco nếu có thể vì lý do hỗ trợ.

Node / Vue newbie, vì vậy hãy tốt đẹp!

Theo file://mặc định, Monaco gia nhập công nhân , nhưng nó không hoạt động trên web.

Bạn nên thay thế nó bằng http://cách cài đặt thủ công MonacoEnviorment hoặc sử dụng Plugin Webpack của Monaco .

Tham khảo tài liệu chính thức

Hãy thử chỉ định webpackplugin monaco trong cấu hình webpack của bạn:

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

...

plugins: [
  new monacoWebpackPlugin()
]

Hoặc cài đặt monaco-Editor-webpack-plugin và thử sử dụng thay thế:

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

...

plugins: [
  new monacoWebpackPlugin()
]

Đối với heightvà width, bạn có thể nghe cửa sổ thay đổi kích thước và gọi editor.layout()hoặc tính toán kích thước vùng chứa và chuyển kích thước cho editor.layout()phương thức ⁽¹⁾ .

Hoặc bạn có thể thử một cái gì đó từ các câu trả lời được đăng khác trong các chủ đề tương tự, ví dụ:

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

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

body {
  margin: 0;
  padding: 0;
}

Hoặc thứ gì đó giống thế này:

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