fix: 解决打开文件编辑，控制台报错的问题

frontend/package-lock.json

@@ -30,7 +30,6 @@
                 "sass-loader": "^13.0.2",
                 "screenfull": "^6.0.2",
                 "unplugin-vue-define-options": "^0.7.3",
-                "vite-plugin-monaco-editor": "^1.1.0",
                 "vue": "^3.2.25",
                 "vue-clipboard3": "^2.0.0",
                 "vue-codemirror": "^6.1.1",
@@ -10274,14 +10273,6 @@
                 "entities": "^2.0.0"
             }
         },
-        "node_modules/vite-plugin-monaco-editor": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
-            "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
-            "peerDependencies": {
-                "monaco-editor": ">=0.33.0"
-            }
-        },
         "node_modules/vite-plugin-vue-setup-extend": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
@@ -18367,12 +18358,6 @@
                 }
             }
         },
-        "vite-plugin-monaco-editor": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
-            "integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
-            "requires": {}
-        },
         "vite-plugin-vue-setup-extend": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",

frontend/package.json

@@ -42,7 +42,6 @@
         "sass-loader": "^13.0.2",
         "screenfull": "^6.0.2",
         "unplugin-vue-define-options": "^0.7.3",
-        "vite-plugin-monaco-editor": "^1.1.0",
         "vue": "^3.2.25",
         "vue-clipboard3": "^2.0.0",
         "vue-codemirror": "^6.1.1",

frontend/src/views/host/file-management/code-editor/index.vue

@@ -9,12 +9,12 @@
     >
         <el-form :inline="true" :model="config">
             <el-form-item :label="$t('file.theme')">
-                <el-select v-model="config.theme" @change="initEditor()">
+                <el-select v-model="config.theme" @change="changeTheme()">
                     <el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" />
                 </el-select>
             </el-form-item>
             <el-form-item :label="$t('file.language')">
-                <el-select v-model="config.language" @change="initEditor()">
+                <el-select v-model="config.language" @change="changeLanguage()">
                     <el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
                 </el-select>
             </el-form-item>
@@ -36,11 +36,34 @@ import { SaveFileContent } from '@/api/modules/files';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import * as monaco from 'monaco-editor';
-import { reactive, ref } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref } from 'vue';
 import { Languages } from '@/global/mimetype';
+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';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 
 let editor: monaco.editor.IStandaloneCodeEditor | undefined;
 
+self.MonacoEnvironment = {
+    getWorker(workerId, label) {
+        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 (['typescript', 'javascript'].includes(label)) {
+            return new tsWorker();
+        }
+        return new EditorWorker();
+    },
+};
+
 interface EditProps {
     language: string;
     content: string;
@@ -90,29 +113,39 @@ const handleClose = () => {
     }
     em('close', false);
 };
+const changeLanguage = () => {
+    monaco.editor.setModelLanguage(editor.getModel(), config.language);
+};
+
+const changeTheme = () => {
+    monaco.editor.setTheme(config.theme);
+};
 
 const initEditor = () => {
     if (editor) {
         editor.dispose();
     }
-    const codeBox = document.getElementById('codeBox');
-    editor = monaco.editor.create(codeBox as HTMLElement, {
-        theme: config.theme,
-        value: form.value.content,
-        readOnly: false,
-        automaticLayout: true,
-        language: config.language,
-        folding: true,
-        roundedSelection: false,
+    nextTick(() => {
+        const codeBox = document.getElementById('codeBox');
+        editor = monaco.editor.create(codeBox as HTMLElement, {
+            theme: config.theme,
+            value: form.value.content,
+            readOnly: false,
+            automaticLayout: true,
+            language: config.language,
+            folding: true,
+            roundedSelection: false,
+            overviewRulerBorder: false,
+        });
+
+        editor.onDidChangeModelContent(() => {
+            if (editor) {
+                form.value.content = editor.getValue();
+            }
+        });
+
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
     });
-
-    editor.onDidChangeModelContent(() => {
-        if (editor) {
-            form.value.content = editor.getValue();
-        }
-    });
-
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
 };
 
 const quickSave = () => {
@@ -139,6 +172,12 @@ const onOpen = () => {
     initEditor();
 };
 
+onBeforeUnmount(() => {
+    if (editor) {
+        editor.dispose();
+    }
+});
+
 defineExpose({ acceptParams });
 </script>
 

frontend/vite.config.ts

@@ -8,12 +8,13 @@ import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import eslintPlugin from 'vite-plugin-eslint';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import DefineOptions from 'unplugin-vue-define-options/vite';
-import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
 
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
+const prefix = `monaco-editor/esm/vs`;
+
 export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     const env = loadEnv(mode, process.cwd());
     const viteEnv = wrapperEnv(env);
@@ -50,8 +51,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
             }),
             vueJsx(),
             VueSetupExtend(),
-
-            MonacoEditorPlugin({}),
             viteEnv.VITE_REPORT && visualizer(),
             viteEnv.VITE_BUILD_GZIP &&
                 viteCompression({
@@ -87,6 +86,13 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
                     chunkFileNames: 'assets/js/[name]-[hash].js',
                     entryFileNames: 'assets/js/[name]-[hash].js',
                     assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
+                    manualChunks: {
+                        jsonWorker: [`${prefix}/language/json/json.worker`],
+                        cssWorker: [`${prefix}/language/css/css.worker`],
+                        htmlWorker: [`${prefix}/language/html/html.worker`],
+                        tsWorker: [`${prefix}/language/typescript/ts.worker`],
+                        editorWorker: [`${prefix}/editor/editor.worker`],
+                    },
                 },
             },
         },