Vue3 异步组件defineAsyncComponent_defineasynccomponent加载服务器上的组件

.box{ display: flex; flex-direction: column; margin: 20px; padding: 15px; background-color: aquamarine; } ```

<template>
  <div class="box">
    <div>异步组件加载失败</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(89, 105, 100);
}
</style>

<template>
  <div class="box">
    <div>异步组件加载中...</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(166, 243, 219);
}
</style>

<template>
  <div class="box">
    <div class="intro">在单文件中加载异步组件</div>
    <div class="btn" @click="importAsyncComponent">点击加载异步组件</div>
  </div>
</template>getCurrentInstance, 
<script setup>
import { defineAsyncComponent, ref } from 'vue'
import ErroComponent from './component/Error.vue'
import LoadingComponent from './component/Loading.vue'

// 单文件中异步加载组件
const AsyncComponent = defineAsyncComponent({
  // 加载函数
  loader: () => import('./component/index.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,

  // 展示加载组件前的延迟时间，默认为200ms,注：这里如果设置的时间过短，会有闪烁的效果
  delay: 200,

  // 加载失败后显示的组件
  errorComponent: ErroComponent,

  // 如果提供了一个timeout时间限制，并且超时了，也会展示这里的报错组件
  // 设置加载超时时间为3000毫秒
  timeout: 3000
})

const isImport = ref(false);
const importAsyncComponent = () => {
  console.log("点击加载异步组件");
  isImport.value = true;
}

</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 30px;
  background-color: antiquewhite;
}
.btn {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: orange;
}
.intro {
  margin: 30px;
  padding: 15px;
}
</style>

        以上四段代码分别对应了四个文件，需要异步加载的子组件、子组件加载错误时的页面，子组件加载中的loading页面，以及使用异步组件的父组件。

        一个小栗子，单文件中加载全局异步组件

<template>
  <div class="box">
    <div>这是一个需要全局异步加载的组件</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(51, 88, 76);
}
</style>

import { createApp, defineAsyncComponent } from 'vue'

const app = createApp(App)

// 配置全局异步组件
app.component('MyAsyncComponent', defineAsyncComponent(() => 
  import('./views/useAsyncComponent/globalImport.vue')
));

<template>
  <div class="box">
    <div class="intro">在单文件中加载全局异步组件</div>
    <div class="btn" @click="importGlobalAsyncComponent">点击加载异步组件</div>
    <MyAsyncComponent v-if="isImportGlobal"></MyAsyncComponent>
  </div>
</template>getCurrentInstance, 
<script setup>
import { defineAsyncComponent, ref } from 'vue'


// 单文件中加载全局异步组件
const isImportGlobal = ref(false);
const importGlobalAsyncComponent = () => {
  console.log("点击加载全局异步组件");
  isImportGlobal.value = true;
}

</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 30px;