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

在Vite 5+Vue 3项目中，可以使用import.meta.glob来动态导入Vue组件。这个功能允许你通过一个 glob 模式来匹配文件，并且导入它们。

下面是一个简单的例子，展示如何使用import.meta.glob来动态导入Vue组件：

// 在Vue文件中
<template>
  <div>
    <!-- 动态组件 -->
    <component :is="resolvedComponent"></component>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 初始化为空，之后会被替换为实际的组件
      resolvedComponent: null
    };
  },
  created() {
    // 动态导入组件
    this.resolvedComponent = this.importComponent('./components/*.vue');
  },
  methods: {
    importComponent(pattern) {
      const modules = import.meta.glob(pattern);
      // 假设只有一个匹配的组件，获取它的默认导出
      const component = Object.values(modules)[0].default;
      return component;
    }
  }
};
</script>

在这个例子中，我们使用import.meta.glob来匹配./components/目录下所有.vue文件，然后动态地将它们作为组件导入。importComponent方法会根据传入的glob模式匹配文件，并返回第一个匹配文件的默认导出。这样，你就可以在Vue组件中动态地使用其他组件了。