layouts中index.vue和indexAsync.vue有什么区别？

[cat-uncles]

<script setup name="layout"> import { computed, reactive, watch } from "vue"; import ThemeDrawer from "./components/ThemeDrawer/index.vue"; import LayoutVertical from "./LayoutVertical/index.vue"; import LayoutClassic from "./LayoutClassic/index.vue"; import LayoutTransverse from "./LayoutTransverse/index.vue"; import LayoutColumns from "./LayoutColumns/index.vue"; import { useGlobalStore } from "@/stores/modules/global.js"; const LayoutComponents = { vertical: LayoutVertical, classic: LayoutClassic, transverse: LayoutTransverse, columns: LayoutColumns }; const globalStore = useGlobalStore(); const isDark = computed(() => globalStore.isDark); const layout = computed(() => globalStore.layout); const watermark = computed(() => globalStore.watermark); const font = reactive({ color: "rgba(0, 0, 0, .15)" }); watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), { immediate: true }); </script> <style scoped lang="scss"> .layout { min-width: 600px; } </style> <script setup name="layoutAsync"> import { computed, reactive, watch } from "vue"; import { useGlobalStore } from "@/stores/modules/global"; import Loading from "@/components/Loading/index.vue"; import ThemeDrawer from "./components/ThemeDrawer/index.vue"; const LayoutComponents = { vertical: () => import("./LayoutVertical/index.vue"), classic: () => import("./LayoutClassic/index.vue"), transverse: () => import("./LayoutTransverse/index.vue"), columns: () => import("./LayoutColumns/index.vue") }; const globalStore = useGlobalStore(); const isDark = computed(() => globalStore.isDark); const layout = computed(() => globalStore.layout); const watermark = computed(() => globalStore.watermark); const font = reactive({ color: "rgba(0, 0, 0, .15)" }); watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), { immediate: true }); </script> <style scoped lang="scss"> .layout { min-width: 600px; } </style>

[xuebi2017]

这是来自QQ邮箱的假期自动回复邮件。   您好，已收到您的邮件，谢谢！

[cat-uncles]

应该是要加上defineAsyncComponent这个属性
const LayoutComponents = {
vertical: defineAsyncComponent(() => import("./LayoutVertical/index.vue")),
classic: defineAsyncComponent(() => import("./LayoutClassic/index.vue")),
transverse: defineAsyncComponent(() => import("./LayoutTransverse/index.vue")),
columns: defineAsyncComponent(() => import("./LayoutColumns/index.vue"))
};