【前端】Vite中import.meta功能详解

在 Vite 项目中， import.meta 是一个 元属性，由现代浏览器原生支持（基于 ES 模块标准），它提供了当前模块的上下文信息。Vite 进一步扩展了它，提供了特定于开发和生产环境的功能。以下是关键特性详解：

---

1. import.meta.env：环境变量

获取项目环境相关的变量：

console.log(import.meta.env)

• 内置变量:
  • MODE: 当前环境（development/production）
  • BASE_URL: 部署基路径（vite.config.js 中的 base）
  • PROD: 是否生产环境（布尔值）
  • DEV: 是否开发环境（布尔值）
  • SSR: 是否服务端渲染（布尔值）
• 自定义变量:
  • 以 VITE_ 开头的变量（如 VITE_API_URL）会被注入
    .env 文件示例：

    VITE_API_URL = "https://api.example.com"
    

    使用：import.meta.env.VITE_API_URL

---

2. import.meta.glob：动态导入文件

批量导入匹配的文件（返回异步函数）：

// 导入 components 目录下所有 .vue 文件
const modules = import.meta.glob('./components/*.vue');
// 使用：modules 返回 Promise

// 同步导入（eager: true）
const modules = import.meta.glob('./data/*.json', { eager: true });
// modules['./data/config.json'] 直接返回解析后的 JSON

---

3. import.meta.hot：模块热替换（HMR）

开发环境下实现热更新：

if (import.meta.hot) {// 监听当前模块更新import.meta.hot.accept((newModule) => {console.log('模块已热更新', newModule);});// 传递自定义数据到 HMRimport.meta.hot.send('custom-event', { data: 123 });
}

---

4. import.meta.url：模块 URL

获取当前模块的完整 URL（浏览器环境）：

const moduleURL = import.meta.url; 
// 输出：file:///path/to/project/src/main.js（开发环境）

---

5. 其他注意事项

• 构建优化：
  import.meta.env 中的值在构建时会被静态替换，例如 import.meta.env.PROD 直接变为 true 或 false。
• 浏览器兼容性：
  需确保目标浏览器支持 ES 模块（现代浏览器均支持）。
• TypeScript 支持：
  在 vite/client.d.ts 中预定义类型，无需额外配置。

---

示例代码

// 获取环境变量
const apiUrl = import.meta.env.VITE_API_URL;// 动态导入组件
const getComponent = async (name) => {const module = await import.meta.glob(`./components/${name}.vue`);return module;
};// 开发环境热更新
if (import.meta.hot) {import.meta.hot.accept();
}

通过 import.meta，Vite 将环境变量、模块操作和 HMR 等功能无缝集成到现代 JavaScript 模块系统中，大幅提升开发体验。