vue3+vite 实现动态引入某个文件夹下的组件 - glob-import的使用

<template>
    <div class="user-content">
        <HeaderTitle title="用户详情"></HeaderTitle>
        <div class="main-content">
            <div>
                <UserForm />
            </div>
            <div>
                <TableList></TableList>
            </div>
            <div>
                <BarChart />
            </div>
            <div>
                <component :is="myComponents[currentActive]"></component>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import UserForm from './components/UserForm.vue';
import TableList from './components/TableList.vue';
import BarChart from './components/BarChart.vue';

const currentActive = ref('UserForm')
const myComponents = reactive<any>({})
onMounted(async ()=>{
     const modules:any = import.meta.glob('./components/*.vue');
     for(const path in modules){
        const module = await modules[path]();
        const componentName = path.replace(/^\.\/components\/(.*)\.vue$/,'$1');
        // 方案一 普通引入
        // myComponents[componentName] = module.default;
        // 方案二 异步组件
        myComponents[componentName] = defineAsyncComponent(()=>import(path));
        console.log('myComponents: ', myComponents);
     }
 })
</script>

动态引入的使用场景：

• 场景：一般是通过tab来切换显示不同的组件。tab列表中我们配置好需要显示哪些组件，记录当前活动的tab（currentActive）,然后在 component 组件中使用。
• 优点: 在组件较多的情况下，不用手动写多条引入代码。

vite 官网文档 – glob-import
https://www.vitejs.net/guide/features.html#glob-import
参考文章
Vue3+vite项目中如何动态导入并创建多个全局组件