JavaScript import.meta 模块元数据

import.meta元数据对象：import.meta.url当前模块URL(ESM)、import.meta.resolve()解析模块路径、import.meta.env(Vite注入环境变量)、import.meta.glob(Vite批量导入)、import.meta.dirname/filename(Node 21+) · 难度：入门 · +10XP

JavaScript import.meta —— 模块的元数据

在ES模块中，import.meta包含了当前模块的元信息——最常用的是import.meta.url（模块自身的URL）。

常用场景

// 获取当前模块的URL
console.log(import.meta.url);
// file:///Users/me/project/app.js  (Node.js)
// https://example.com/js/app.js   (浏览器)
// Vite特有：批量导入
const modules = import.meta.glob('./components/*.vue');
// Vite特有：环境变量
console.log(import.meta.env.VITE_API_URL);
// Node.js 21+：dirname/filename
console.log(import.meta.dirname);  // 替代__dirname
console.log(import.meta.filename); // 替代__filename

动手练习

1. 基础练习：用import.meta.url获取当前模块路径，加载同目录下的JSON文件。
2. 进阶应用：在Vite项目中用import.meta.glob批量导入Markdown文件。
3. 项目实战：用import.meta.env在Vite项目中管理多环境配置。