前端模块化开发：import.meta.glob 使用指南

import.meta.glob 特性入门

在 Vite 等现代构建工具中，import.meta.glob 是一种特殊语法，支持通过文件路径匹配模式一次性导入多个模块。相比传统的手动 import，它能大幅减少重复代码。

基础概念

import.meta.glob 返回一个对象，键是文件路径，值是返回 Promise 的异步函数。它支持 glob 语法匹配，常用于批量导入组件或配置文件。

基础示例

假设项目中有 components 文件夹，包含 Button.vue、Card.vue 等组件：

传统方式：

import Button from './components/Button.vue'
import Card from './components/Card.vue'
// ... 需手动编写每一行

使用 import.meta.glob：

const modules = import.meta.glob('./components/*.vue')

只需一行代码即可全部导入，构建时会自动优化这些导入。

动态加载演示

该特性支持动态加载模块，可结合路由配置实现按需加载：

1. 路径匹配符：如 ./components/*.vue 指定文件范围。
2. 正则筛选：可使用正则表达式进一步筛选需要的文件。
3. 按需加载：在路由配置中动态引入对应模块。

错误处理技巧

实际使用时可能会遇到路径错误等问题，建议做好错误处理：

• 用 try-catch 包裹导入逻辑。
• 检查返回的对象是否为空。
• 添加默认值防止 undefined 报错。

try {
  const modules = import.meta.glob('./components/*.vue')
  if (!modules) return
} catch (error) {
  console.error('Import failed:', error)
}