当前位置：首页 > news >正文

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

news 来源：原创 2024/9/8 10:12:46

在这里插入图片描述

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

动态引入的使用场景：

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

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

修改

在这里插入图片描述
在第一次写完之后没有注意到这个警告，查了一下后发现了这个问题解决方法。

所以我们不能直接只用url的方式动态的import组件，需要直接使用modules中提供对象的值就可以，我居然以为需要用path去加载组件（所以写了()=>import(path)），其实只需要用modules对象中的值就可以啦。


//错误
myComponents[componentName] = defineAsyncComponent(()=>import(path));  // 这种用法vite会有警告//正确
myComponents[componentName] = defineAsyncComponent(modules[path]); // 直接使用meta.glob加载的组件即可