Vite 中的 import.meta对象详解

在 Vite 项目中，import.meta 对象提供了与当前模块相关的元数据和环境信息。这是一个 ES6 模块标准的扩展，Vite 在此基础上添加了一些特定的属性。以下是 import.meta 在 Vite 中的主要属性及其说明：

1. import.meta.url 🔗

• 类型：string
• 说明：当前模块的完整 URL，与原生 ES 模块的 import.meta.url 一致。在浏览器中，它是模块的绝对 URL；在 Node.js 中，它是文件的 file:// URL。
• 示例：

  console.log(import.meta.url); // 输出类似 "http://localhost:3000/src/main.js"
  

2. import.meta.env 🌍

• 类型：Record<string, string>
• 说明：包含项目环境变量的对象，所有以 VITE_ 开头的环境变量都会被注入到这里。
• 常用属性：
  • import.meta.env.MODE：当前应用的运行模式（如 development、production）。
  • import.meta.env.PROD：是否为生产环境（布尔值）。
  • import.meta.env.DEV：是否为开发环境（布尔值）。
  • import.meta.env.SSR：是否在服务器端渲染（布尔值）。
  • import.meta.env.VITE_*：自定义环境变量（需以 VITE_ 开头）。
• 示例：

  console.log(import.meta.env.MODE); // 开发环境输出 "development"
  console.log(import.meta.env.VITE_API_BASE_URL); // 自定义环境变量
  

3. import.meta.glob 📂

• 类型：Function
• 说明：Vite 提供的动态导入功能，用于批量导入匹配特定模式的模块。
• 参数：
  • pattern: 匹配的 glob 模式（如 './modules/*.js'）。
  • options: 可选配置对象，支持以下属性：
    • eager: 是否立即导入所有模块（布尔值，默认为 false）。
    • as: 指定导入方式（如 'raw' 表示导入原始内容）。
    • sync: 是否同步导入（布尔值，默认为 false）。
• 示例：

  // 动态导入所有模块
  const modules = import.meta.glob('./modules/*.js');
  
  // 立即导入并执行所有模块
  const modules = import.meta.glob('./modules/*.js', { eager: true });
  

4. import.meta.globEager 🚀

• 类型：Function
• 说明：import.meta.glob 的快捷方式，等同于 import.meta.glob(pattern, { eager: true })，用于立即导入所有匹配的模块。
• 示例：

  const modules = import.meta.globEager('./modules/*.js');
  

5. import.meta.hot 🔥

• 类型：ViteHotContext | undefined
• 说明：Vite 的热更新 API，仅在开发环境可用，用于实现模块热替换（HMR）。
• 常用方法：
  • import.meta.hot.accept()：接受模块更新。
  • import.meta.hot.dispose()：模块卸载前执行清理。
  • import.meta.hot.data：在模块更新之间保留数据。
• 示例：

  if (import.meta.hot) {
    import.meta.hot.accept((newModule) => {
      // 处理模块更新
    });
  }
  

6. import.meta.url（资源导入） 🖼️

• 说明：当导入非 JS 资源时，import.meta.url 会返回该资源的解析 URL。
• 示例：

  import imageUrl from './assets/image.png';
  console.log(imageUrl); // 输出处理后的资源 URL
  

总结 📊

属性	类型	说明
import.meta.url	string	当前模块的 URL
import.meta.env	object	环境变量，包含 MODE、PROD、DEV、SSR 和自定义 VITE_* 变量
import.meta.glob	function	动态导入匹配特定模式的模块
import.meta.globEager	function	立即导入所有匹配的模块
import.meta.hot	object	开发环境的热更新 API