Nuxt 3中defineAsyncComponent的Loading组件不显示问题排查

• 加载速度过快导致无法显示：本地开发环境下组件加载通常很快，loading组件还没来得及渲染就完成了加载。可以通过给异步组件的加载逻辑添加延迟，或者设置delay: 0强制立即显示loading组件。
• 配置写法问题：确保loadingComponent的定义正确，且defineAsyncComponent的配置项没有遗漏。

修正示例代码 #

方式1：添加加载延迟 #

<template>
  <AsyncTest />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncTest = defineAsyncComponent({
  loader: () => new Promise(resolve => {
    // 模拟1秒加载延迟，方便看到loading效果
    setTimeout(() => resolve(import('../components/Test.vue')), 1000)
  }),
  loadingComponent: {
    template: '<div>正在加载...</div>'
  }
})
</script>

方式2：设置delay为0 #

如果不想添加模拟延迟，可通过delay配置强制立即显示loading组件：

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncTest = defineAsyncComponent({
  loader: () => import('../components/Test.vue'),
  loadingComponent: {
    template: '<div>正在加载...</div>'
  },
  delay: 0 // 取消默认的200ms延迟，加载开始就显示loading
})
</script>

另外需要确认：loadingComponent的模板或导入的组件没有语法错误，且异步组件是通过defineAsyncComponent手动定义的，而非依赖Nuxt的自动组件注册逻辑。

内容的提问来源于stack exchange，提问作者kiborgKiller