vite5+vue3+ import.meta.glob动态导入vue组件

vitenode

已于 2024-03-25 17:40:18 修改

阅读量5.9k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2024-03-25 17:31:46 首次发布

本文链接：https://blog.csdn.net/qq_37312180/article/details/137019982

本文介绍了如何在Vite项目中使用import.meta.glob动态导入src/pages/DynamicComponents下的Vue组件，并解决因使用reactive和ref可能导致的性能警告。通过markRaw方法标记组件，实现按需加载并优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 pat