Vue 3 的 Monaco Editor Web Worker 问题

Question

我试图在 Vue 3 应用程序中实现 Monaco 编辑器，但我无法获得 Web Worker 运行。

// Editor.vue

<template>
  <div id="container">
    <div id="editor-section"></div>
    <button @click="runCode">Run</button>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
import { onMounted } from "vue";

export default {
  name: "Editor",
  setup() {
    let codeEditor = null;

    function initEditor() {
      codeEditor = monaco.editor.create(document.getElementById("editor-section"), {
        value: "function hello() {\n\talert('Hello world!');\n}",
        language: "javascript",
        theme: "vs-dark"
      });
    }

    function runCode() {
      console.log("runCode");
      console.log(codeEditor.getValue());
    }

    onMounted(() => {
      initEditor();
    })

    return { codeEditor, runCode }
  },
};
</script>

我正在获取编辑器，但存在这个问题

我正在使用

// vue.config.js

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  plugins: [
    new MonacoWebpackPlugin()
  ]
};

我错过了什么吗？

我应该关心这个问题吗？

我的项目目标是我想实现一个 Web 编辑器，它获取写入的文件并在 docker 容器中编译。

Answer 1

你好像把插件放错地方了。它应该放在 configureWebpack 中，代表 webpack 配置：

vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin(), // Place it here
    ]
  },
  // ...
}

Vue 3 的 Monaco Editor Web Worker 问题

Monaco Editor Web Worker Issue with Vue 3

vue.js

monaco-editor

vuejs3