Vue注册动态异步组件时如何设置默认加载Loader占位？

你写的语法是Vue 2.3.0+ 版本专属的高级异步组件写法，不生效通常是版本不匹配、用法不符合对应版本要求导致的，以下分版本给出正确实现：

Vue 2 实现方案 #

前提：确保本地Vue版本 >= 2.3.0，你的原有写法仅需调整几个参数即可生效：

import Loader from '../components/loader';
const Dashboard = () => ({
  component: import('../components/dashboard'),
  loading: Loader,
  // 测试阶段建议先设为0，默认值为200ms，值大于0时加载时间短于该值不会显示Loader
  delay: 0,
  // 可选配置：加载超时后展示的错误组件
  error: () => import('../components/load-error'),
  // 可选配置：超时时间，单位ms
  timeout: 10000
})

Vue.component('dashboard', Dashboard);

常见排查点 #

• 不要把异步工厂函数写成async () => {}格式，async函数返回的是Promise，不符合要求的对象结构
• 测试时可将浏览器网络调为慢3G，模拟加载延迟场景验证Loader展示

Vue 3 实现方案 #

Vue3 中异步组件必须用defineAsyncComponent包裹，且配置字段有调整，正确写法如下：

import { defineAsyncComponent } from 'vue'
import Loader from '../components/loader.vue'

const AsyncDashboard = defineAsyncComponent({
  loader: () => import('../components/dashboard.vue'),
  // 加载中展示的组件
  loadingComponent: Loader,
  // 可选配置：错误提示组件
  errorComponent: () => import('../components/load-error.vue'),
  delay: 0,
  timeout: 10000
})

// 全局注册
app.component('dashboard', AsyncDashboard)

通用注意事项 #

• 检查动态import的组件路径是否正确，路径错误会直接进入错误状态，不会触发loading展示
• Loader组件需保证自身无渲染报错，可先单独引入该组件验证可用性

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