如何將 Monaco 與 Vue.js 集成？

Question

我創建了一個新的 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:/// 訪問文件，我沒有這樣做（我正在訪問節點網絡服務器）。

此外，除非明確指定高度，否則編輯器無法正確呈現 - 我認為這不是預期的行為。

如何讓 monaco-editor 在 Vue 中正常工作？ 如果可能，出於支持原因，我想避免使用非官方的第三方包裝器，例如https://github.com/egoist/vue-monaco 。

Node/Vue 新手，請善待！

Answer 1

Monaco 默認通過file://訪問 worker，但在 web 中不起作用。

您應該通過手動設置 MonacoEnviorment 或使用Monaco Webpack Plugin將其替換為http:// 。

參考官方文檔

Answer 2

嘗試在 webpack 配置中指定 monaco webpack插件：

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 ，您可以聽 window 調整大小並調用editor.layout()或計算容器大小並將大小傳遞給editor.layout()方法⁽¹⁾ 。

或者，您可以嘗試類似主題中其他已發布答案的內容，例如：

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

Answer 3

我為 vue.js 找到了這個

https://www.npmjs.com/package/monaco-editor-vue

這可能會幫助你

Answer 4

您需要將Vue CLI 版本與monaco-editor和monaco-editor-webpack-plugin 匹配

Vue2：因為vue2使用的是webpack 4，所以我們需要安裝：

npm i monaco-editor@0.30.1

npm i monaco-editor-webpack-plugin@6.0.0

Vue3 （如果您有 Vue CLI 5，它可能基於 webpack 5。如果 CLI 4 解決方案與 Vue2 相同）

npm i monaco-editor (> = 0.31. *)

npm i monaco-editor-webpack-plugin 7.0.0

vue.config.js：

const monacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [new monacoWebpackPlugin()],
  },
};

來源： https://www.npmjs.com/package/monaco-editor-webpack-plugin https://github.com/microsoft/monaco-editor/issues/2903