import.meta.glob
是 Vite 提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块。这在处理大量的文件,如组件、页面或其他模块时特别有用,特别是当你需要根据某些条件或模式来动态加载它们时。
1.创建需要动态导入的组件目录
假设你有一个src/pages/DynamicComponents目录,里面包含多个 Vue 组件,你想根据某些条件动态地导入这些组件。
首先,确保你的目录结构是这样的:
src/pages/index.vue文件
<template>
<div class="DynamicComponentsOutbox">
<h1>DynamicComponents</h1>
</div>
<div>
<component v-for="(component, name) in dynamicComponents" :key="name" :is="component" />
</div>
</template>
<script setup>
import { onMounted, reactive,markRaw } from 'vue'
const dynamicComponents = reactive({})
onMounted(async () => {
const modules = import.meta.glob('./DynamicComponents/*.vue');
for (const path in modules) {
const module = await modules[path]();
const componentName = path.replace(/^\.\/components\/(.*)\.vue$/, '$1');
console.log(`componentName`,componentName );
dynamicComponents[componentName] = markRaw(module.default)
}
console.log(`dynamicComponents`,dynamicComponents);
})
</script>
<style lang="scss" scoped></style>
src/pages/DynamicComponents/ComponentA.vue文件
<template>
<div class="">
<h1>ComponentA</h1>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped></style>
src/pages/DynamicComponents/ComponentB.vue文件
<template>
<div class="">
<h1>ComponentB</h1>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
App.vue文件
<template>
<main>
<HelloWorld msg="You did it!" />
<component :is='DynamicComponents'></component>
</main>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import DynamicComponents from '@/pages/index.vue'
</script>
<style scoped></style>
index.vue:6 [Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Component that was made reactive: {__hmrId: 'ed2b2297', __file: 'C:/Users/63002/Desktop/codefile/vue3-vite2/src/pages/DynamicComponents/ComponentA.vue', render: ƒ} at <Index> at <App>
刚开始这样写
dynamicComponents[componentName] =module.default
这里报了一个警告:提示你去给组件使用markRaw
or shallowRef
包起来就好了,我直接使用了markRaw来包起组件 ,就解决这个警告了。
改为:
import { onMounted, reactive,markRaw } from 'vue'
dynamicComponents[componentName] = markRaw(module.default)
<template>
<div class="DynamicComponentsOutbox">
<h1>DynamicComponents</h1>
</div>
<div>
<component v-for="(component, name) in dynamicComponents" :key="name" :is="component" />
</div>
</template>
<script setup>
import { onMounted, reactive,markRaw } from 'vue'
const dynamicComponents = reactive({})
onMounted(async () => {
const modules = import.meta.glob('./DynamicComponents/*.vue');
for (const path in modules) {
const module = await modules[path]();
const componentName = path.replace(/^\.\/components\/(.*)\.vue$/, '$1');
console.log(`componentName`,componentName );
dynamicComponents[componentName] = markRaw(module.default)
}
console.log(`dynamicComponents`,dynamicComponents);
})
</script>
<style lang="scss" scoped></style>
在上面的代码中,我们首先在onMounted钩子中使用 import.meta.glob
获取 components
目录下所有 .vue
文件的动态导入。然后,我们遍历这些模块,加载它们,并将它们存储在 dynamicComponents
对象中,其中键是组件的名称(从文件路径中提取),值是组件的默认导出。
最后,在模板中,我们使用 v-for
指令遍历 dynamicComponents
对象,并使用 Vue 的动态组件功能 (<component :is="...">
) 来渲染每个组件。
注意:由于
import.meta.glob
是在构建时解析的,因此它不会为动态路径或运行时确定的路径工作。它主要用于静态路径模式。