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

<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));  // 这种用法vite会有警告
        myComponents[componentName] = defineAsyncComponent(modules[path]); // 直接使用meta.glob加载的组件即可
        console.log('myComponents: ', myComponents);
     }
 })
</script>