es modules中无法直接获取当前模块文件路径,需用import.meta.url配合fileurltopath解析;浏览器中仅能构造相对url,不可获本地路径;构建工具推荐静态导入或环境变量注入。

ES Modules(ESM)中无法直接获取当前模块的文件路径名,因为 ESM 的设计是环境无关的,不提供类似 CommonJS 中 __filename 或 __dirname 的内置变量。但根据运行环境(主要是 Node.js),有几种实用、安全的替代方案。
Node.js 环境:用 import.meta.url 解析路径
import.meta.url 是 ESM 唯一标准化的、可跨环境访问模块定位信息的方式。它返回一个形如 file:///path/to/module.js 的 URL 字符串,可配合 URL 和 path(Node.js)进行解析:
- 获取当前模块的绝对文件路径(
/full/path/to/module.js):import { fileURLToPath } from 'url';<br>const __filename = fileURLToName(import.meta.url); - 获取当前模块所在目录(等价于
__dirname):import { dirname, join } from 'path';<br>const __dirname = dirname(fileURLToName(import.meta.url)); - 注意:必须先定义辅助函数
fileURLToName(因 Node.js 尚未提供全局__filename):const fileURLToName = (url) => fileURLToPath(url);
浏览器环境:import.meta.url 可用但受限
浏览器支持 import.meta.url,但它指向的是资源加载时的实际 URL(可能是远程地址、data URL 或 blob URL),**无法可靠转为本地文件系统路径**(出于安全限制,浏览器禁止 JS 访问真实文件路径)。因此:
- 可用于构造相对资源路径(如
new URL('./assets/icon.png', import.meta.url)); - 不能用于获取“磁盘路径”或“项目根目录”,也不应尝试模拟
__dirname; - 若需区分开发/生产环境路径,建议通过构建工具(如 Vite、Webpack)注入环境变量,而非依赖运行时路径推导。
避免常见错误写法
以下方式在 ESM 中不可用或不推荐:
-
__filename/__dirname:仅 CommonJS 支持,ESM 模块中会报ReferenceError; -
require.main.filename或process.cwd():不表示当前模块位置,而是进程入口或工作目录,极易出错; - 手动解析
import.meta.url字符串(如用.replace('file://', '')):Windows 路径含盘符(file:///C:/...),且编码问题(空格、中文)会导致解析失败,务必用fileURLToPath。
构建工具场景:静态分析更可靠
如果目标是读取同目录下的 JSON、模板等资源,在构建流程中(如 Vite、Rollup、Webpack)更推荐:
- 使用
import直接导入(如import data from './config.json'),由打包器处理路径; - 利用插件注入模块路径常量(如 Rollup 的
replace插件 +import.meta.env); - 服务端渲染(SSR)时,优先在 Node.js 层完成路径解析,再将结果传给前端。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











