Vite 模块动态导入之Glob导入

发布于:2025-07-31 ⋅ 阅读:(25) ⋅ 点赞:(0)

image

前言

  在 Vite 中有一个特殊的导入方式,即我们今天打算讨论的 Glob 导入 。这种导入弥补完善了 JavaScript 导入体系中不能同时导入到某个文件目录的多个文件的缺陷。

一、快速入门

1.1 什么是 import.meta.glob

  在 Vue3 和 Vite 的开发环境中, import.meta.glob()Vite 提供的一个强大的模块动态导入功能,用于在构建时批量导入模块(如 Vue 文件、图片、JSON 等),并生成按需加载的代码。Glob 导入可以导入目录中的所有文件/目录,也可以对文件/目录进行匹配筛选。这在处理大量的文件,如组件、页面或其他模块时特别有用,特别是当需要根据某些条件或模式来动态加载它们时。

1.2 基本语法

const modules = import.meta.glob(
	pattern,          		// 匹配文件路径的 glob 模式:字符串或字符串数组
    {						// 可选配置
    	eager?: boolean, 	// 是否同步导入
    	import?: string | string[], // 指定导入的内容,例如:import: 'default'
    	query?: string|Record<string, string | number | boolean> // 查询参数
  }
);
  • 所有 import.meta.glob 的参数都必须以字面量传入,不可以在其中使用变量或表达式。
  • 路径相对于当前文件,必须是相对路径(以 ./ 开头)或绝对路径(以 / 开头,相对于项目根目录解析)或一个别名路径。

二、核心功能

  假设有一个 src/views/DynamicComponents 目录,里面包含多个 Vue 组件。若是根据某些条件动态地导入这些组件,那么可以使用 import.meta.glob 来实现这个需求。

2.1 基本导入

  这种导入是动态导入,通过 glob 模式来匹配文件,默认返回一个函数对象,对象的键是匹配到的文件路径,值是 import() 函数,这个功能可以帮助我们实现模块的按需加载。

// 使用 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); // 这里可以访问到组件的默认导出
  });
}

说明】异步加载 - 代码分割,按需加载。

2.2 同步导入

  Glob 导入匹配到的文件默认是懒加载的,若是想要直接引入所有的模块,则需要借助 eager 选项, 当设置为 true 时,它会立即导入所有匹配的模块,而不是返回一个 Promise,这在某些场景下可以提高性能。

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

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

注意】同步加载 - 所有模块打包在一起。

2.3 指定导入内容

  若是只想要导入模块中的部分内容,那么可以利用 import 选择,其允许我们指定导入模块的导出内容。

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

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

自定义查询

  还可以使用 query 选项来提供对导入的自定义查询,比如,可以将资源作为字符串引入或者作为 URL 引入。

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

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

三、小结

  import.meta.glob 是 Vite 的核心功能,用于高效处理模块批量导入,它可以帮助我们实现模块的按需加载。通过 import.meta.glob,我们可以轻松地动态导入模块,并在 Vue3 项目中实现动态路由、懒加载组件等功能。
image


网站公告

今日签到

点亮在社区的每一天
去签到