fix: 解决编辑器不能正常执行worker的问题

src/components/Pages/MonacoEditor/EditorWorker.vue

@@ -0,0 +1,20 @@
+<template></template>
+
+<script setup>
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+self.MonacoEnvironment = {
+  getWorker(workerId, label) {
+    if (label === 'json') {
+      return new jsonWorker()
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker()
+    }
+    return new editorWorker()
+  }
+}
+</script>

src/components/Pages/MonacoEditor/index.hook.ts

@@ -1,34 +1,10 @@
 import { ref, onBeforeUnmount, nextTick } from 'vue'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
-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'
 
 export const useMonacoEditor = (language = 'javascript') => {
   let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
   let initReadOnly = false
   const el = ref<HTMLElement | null>(null)
-  
-  // @ts-ignore
-  self.MonacoEnvironment = {
-    getWorker(_: any, label: string) {
-      if (label === 'json') {
-        return new jsonWorker()
-      }
-      // if (label === 'css' || label === 'scss' || label === 'less') {
-      //   return new cssWorker()
-      // }
-      // if (label === 'html' || label === 'handlebars' || label === 'razor') {
-      //   return new htmlWorker()
-      // }
-      if (label === 'typescript' || label === 'javascript') {
-        return new tsWorker()
-      }
-      return new editorWorker()
-    }
-  }
 
   // 格式化
   const onFormatDoc = async () => {

src/components/Pages/MonacoEditor/index.ts

@@ -1,3 +1,4 @@
 import MonacoEditor from './index.vue';
+import EditorWorker from './EditorWorker.vue';
 
-export { MonacoEditor };
+export { MonacoEditor, EditorWorker };

src/components/Pages/MonacoEditor/index.vue

@@ -1,10 +1,12 @@
 <template>
   <div ref="el" class="editor-area" :style="{ width, height }"></div>
+  <EditorWorker></EditorWorker>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, watch, PropType } from 'vue'
 import { useMonacoEditor } from './index.hook'
+import { EditorWorker } from './index'
 
 const props = defineProps({
   width: {
@@ -17,7 +19,7 @@ const props = defineProps({
   },
   language: {
     type: String as PropType<string>,
-    default: 'javascript'
+    default: 'typescript'
   },
   preComment: {
     type: String as PropType<string>,