vue3+vite+monaco-editor+js编辑报错Error: Unexpected usage at EditorSimpleWorker.loadForeignModule

项目：若依框架做的管理平台（vue3）

需求：使用monaco-editor编辑器做js、java、sql编辑，

实现方案：编辑器组件代码是移入其他开源项目代码，移入的是vue2的写法

组件部分原代码：

以上是移入组件部分原代码，解决报错主要也是在这里面添加代码解决

在项目中java和sql编辑没有问题，但是切换到js编辑时创建编辑器或输入就报错如下：

Error: Unexpected usage at EditorSimpleWorker.loadForeignModule

在网上找了很多大佬写的帖子

帖子1.

使用了一下无法生效

帖子2.

在找了一些说在vite.config.js中进行强制构建

按照上图使用

还是无法解决报错。

最终解决方案：

看到了一个帖子如下：

根据这个帖子对自己的代码进行了一下更改

如图将代码添加后终于没有报错，使用也正常也不影响其他类型编辑

附组件代码：

<template>

  <div ref="editor" class="main"></div>

</template>

<script>

import * as monaco from "monaco-editor";

import createSqlCompleter from "./util/sql-completion";

import createJavascriptCompleter from "./util/javascript-completion";

import registerLanguage from "./util/log-language";

import { toRaw } from "vue";

import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";

import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";

import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";

import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";

import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

const global = {};

const getHints = model => {

  let id = model.id.substring(6);

  return (global[id] && global[id].hints) || [];

};

monaco.languages.registerCompletionItemProvider(

  "sql",

  createSqlCompleter(getHints)

);

monaco.languages.registerCompletionItemProvider(

  "javascript",

  createJavascriptCompleter(getHints)

);

// 解决 js编辑 报错提示EditorSimpleWorker.loadForeignModule问题

self.MonacoEnvironment={

  getWorker(_, label){

    if (label === "typescript" || label === "javascript") {

      return new tsWorker();

    }

    return new editorWorker();

  }

}

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

registerLanguage(monaco);

/**

 * monaco options

 * https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html

 */

export default {

  props: {

    options: {

      type: Object,

      default() {

        return {};

      }

    },

    modelValue: [String, Object, Array],

    // value: {

    //   type: String,

    //   required: false

    // },

    language: {

      type: String

    },

    hints: {

      type: Array,

      default() {

        return [];

      }

    }

  },

  name: "MonacoEditor",

  data() {

    return {

      editorInstance: null,

      defaultOptions: {

        theme: "vs-dark",

        fontSize: 14

      }

    };

  },

  watch: {

    modelValue() {

      if (this.modelValue !== toRaw(this.editorInstance).getValue()) {

        toRaw(this.editorInstance).setValue(this.modelValue);

      }

    }

  },

  mounted() {

    this.initEditor();

    global[toRaw(this.editorInstance)._id] = this;

    window.addEventListener("resize", this.layout);

    // this.layout();

  },

  destroyed() {

    toRaw(this.editorInstance).dispose();

    global[toRaw(this.editorInstance)._id] = null;

    window.removeEventListener("resize", this.layout);

  },

  methods: {

    layout() {

      toRaw(this.editorInstance).layout();

    },

    undo() {

      toRaw(this.editorInstance).trigger("anyString", "undo");

      this.onValueChange();

    },

    redo() {

      toRaw(this.editorInstance).trigger("anyString", "redo");

      this.onValueChange();

    },

    getOptions() {

      let props = { value: this.modelValue };

      this.language !== undefined && (props.language = this.language);

      let options = Object.assign({}, this.defaultOptions, this.options, props);

      return options;

    },

    onValueChange() {

      // this.$emit("input", toRaw(toRaw(this.editorInstance)).getValue() );

      // this.$emit("change", toRaw(toRaw(this.editorInstance)).getValue() );

      this.$emit("update:modelValue", toRaw(this.editorInstance).getValue())

    },

    initEditor() {

      this.MonacoEnvironment = {

        getWorkerUrl: function () {

          return "./editor.worker.bundle.js";

        }

      };

      this.editorInstance = monaco.editor.create(

        this.$refs.editor,

        this.getOptions()

      );

      toRaw(this.editorInstance).onContextMenu(e => {

        this.$emit("contextmenu", e);

      });

      toRaw(this.editorInstance).onDidChangeModelContent(() => {

        this.onValueChange();

      });

      toRaw(this.editorInstance).addCommand(

        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,

        () => {

          this.$emit("save", toRaw(this.editorInstance).getValue());

        }

      );

    }

  }

};

</script>

<style scoped>

.main :deep(.view-lines *) {

  font-family: Consolas, "Courier New", monospace !important;

}

</style>

找了很多帖子都无法解决报错问题，最后借鉴一些大佬的帖子结合自己的改一下最后解决报错问题，怕后面再次遇到忘记，所以特此记录一下，如有更简便的方法还请多多指教。