vue3 动态加载组件

我们把路由放到服务器了，所以指定就需要动态加载组件

1，该方法匹配到的文件默认是懒加载，通过动态导入实现，构建时会分离独立的 chunk，是异步导入，返回的是 Promise，需要做异步操作，使用方式如下：

const Components = import.meta.glob('../components/**/*.vue');// 转译后：
const Components = {
  './components/a.vue': () => import('./components/a.vue'),
  './components/b.vue': () => import('./components/b.vue')
}

下面是是引用具体的文件

const viteComponents = import.meta.glob("/src/views/**"); 
//将字符串组件变为具体的路径
const path = `/src/views/${component}.vue`
element.component = viteComponents[path];//element.componentc就是最终获取到的组件文件

2，该方法是直接导入所有模块，并且是同步导入，返回结果直接通过 for...in循环就可以操作，使用方式如下：

const Components = import.meta.globEager('../components/**/*.vue');
// 转译后：
import * as __glob__0_0 from './components/a.vue'
import * as __glob__0_1 from './components/b.vue'
const modules = {
  './components/a.vue': __glob__0_0,
  './components/b.vue': __glob__0_1
}

3，如果仅仅使用异步导入 Vue3 组件，也可以直接使用 Vue3 defineAsyncComponent API 来加载：

// https://v3.cn.vuejs.org/api/global-api.html#defineasynccomponent

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)