vue3+vite 批量引入组件动态使用

import { ref, reactive, toRaw, markRaw, defineAsyncComponent, onMounted } from 'vue'
import type { Component } from 'vue'// vue3+vite 批量引入组件动态使用
const modules = import.meta.glob<Component>('./details/*.vue') // 明确指定导入的模块类型为Component
const components: any = ref({})
Object.entries(modules).forEach(([path, asyncCom]) => {const name = path.replace(/\.\/details\/(.*)\.vue/, '$1')try {components.value[name] = markRaw(defineAsyncComponent(asyncCom))} catch (error) {console.error(`动态导入组件 ${name} 时出错:`, error)}
})

使用

<main class="card-bg mt-16"><!-- 这里可以使用生成的list数组来动态渲染el-tabs组件，示例如下 --><el-tabs type="border-card" v-model="state.cardActive"><el-tab-pane v-for="(tab, index) in state.tabs" :key="index" :label="tab.label" :name="tab.key"><component :is="components[tab.key]" /></el-tab-pane></el-tabs></main>