fix prettier

src/components/Editors.vue

@@ -73,13 +73,7 @@
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-// @ts-ignore
-import * as prettier from "prettier/standalone"
-// @ts-ignore
-import * as estreeParser from "prettier/plugins/estree"
-import * as htmlParser from "prettier/plugins/html"
-import * as cssParser from "prettier/plugins/postcss"
-import * as babelParser from "prettier/plugins/babel"
+// Prettier 和插件现在使用动态导入
 import Editor from "./Editor.vue"
 import Corner from "./Corner.vue"
 import { html, css, js, tab, size, reset } from "../store/editors"
@@ -98,20 +92,34 @@ function changeSize(num: number) {
 
 async function format() {
   try {
+    // 动态导入 Prettier 和插件以避免构建时的模块解析问题
+    const [prettierModule, htmlParserModule, cssParserModule, babelParserModule, estreeParserModule] = await Promise.all([
+      // @ts-ignore
+      import("prettier/standalone"),
+      // @ts-ignore
+      import("prettier/plugins/html"),
+      // @ts-ignore
+      import("prettier/plugins/postcss"),
+      // @ts-ignore
+      import("prettier/plugins/babel"),
+      // @ts-ignore
+      import("prettier/plugins/estree")
+    ])
+    
     const [htmlFormatted, cssFormatted, jsFormatted] = await Promise.all([
-      prettier.format(html.value, {
+      prettierModule.format(html.value, {
         parser: "html",
-        plugins: [htmlParser, babelParser, cssParser, estreeParser],
+        plugins: [htmlParserModule, babelParserModule, cssParserModule],
         tabWidth: 4,
       }),
-      prettier.format(css.value, {
+      prettierModule.format(css.value, {
         parser: "css",
-        plugins: [cssParser],
+        plugins: [cssParserModule],
         tabWidth: 4,
       }),
-      prettier.format(js.value, {
+      prettierModule.format(js.value, {
         parser: "babel",
-        plugins: [babelParser, estreeParser],
+        plugins: [babelParserModule, estreeParserModule],
         tabWidth: 2,
       }),
     ])