Vite模块动态导入之Glob导入实践

const modules = import.meta.glob(
	pattern,          		// 匹配文件路径的 glob 模式：字符串或字符串数组
    {						// 可选配置
    	eager?: boolean, 	// 是否同步导入
    	import?: string | string[], // 指定导入的内容，例如：import: 'default'
    	query?: string｜Record<string, string | number | boolean> // 查询参数
  }
);

// 使用 import.meta.glob 导入所有组件
const modules = import.meta.glob('/src/views/DynamicComponents/*.vue')

// 通过遍历 modules 对象来动态加载组件
for (const path in modules) {
  // 输出模块路径
  console.log('模块路径：', path)
  console.log('文件名：', path.split("/src/views/DynamicComponents/")[1].split('.vue')[0])
  // 等待模块加载完成，输出模块内容
  await modules[path]().then((mod: any) => {
    console.log('模块内容：', mod.default); // 这里可以访问到组件的默认导出
  });
}

const eagerModules = import.meta.glob('/src/views/DynamicComponents/*.vue', {eager: true})

for (const path in modules) {
  console.log(modules[path]); // 直接访问模块
}

const specificImports = import.meta.glob('./DynamicComponents/*.vue', {
  import: 'default', // 只导入默认导出
  eager: true
})

const multipleImports = import.meta.glob('./DynamicComponents/*.vue', {
  import: ['default', 'setup'], // 导入多个指定内容
  eager: true
})

// 作为 URL 导入
const imageUrls = import.meta.glob('./assets/*.png', {
  query: '?url'
})

// 作为原始文本导入
const rawContents = import.meta.glob('./files/*.md', {
  query: '?raw'
})