深入解析 import.meta.url：与 new URL() 的关系及 Vite 中的 base 路径影响

在现代前端开发中，模块化已成为标配。ES Module 提供的 import.meta.url 是动态资源处理的利器，它与 new URL() 的组合使用更是解决路径问题的黄金搭档。

一、import.meta.url 基础概念

import.meta.url 是 ES Module 的内置属性，返回当前模块的完整文件 URL。它是模块自省的入口点，让模块能够获取自身信息：

javascript 复制代码

// 在 /src/utils.js 中
console.log(import.meta.url); 
// 输出：file:///project/src/utils.js（开发环境）
// 或 https://domain.com/assets/utils.js（生产环境）

二、new URL() 的魔法解析

new URL() 是浏览器原生 API，用于解析 URL。关键特性在于第二个参数提供基准 URL，使相对路径解析成为可能：

javascript 复制代码

const absoluteUrl = new URL('./config.json', import.meta.url).href;
// 基于当前模块路径解析出 config.json 的完整 URL

三、Vite 中的 base 路径如何影响结果？

当 Vite 配置了 base: '/production/' 时，项目部署路径会变化。但 new URL() 与 import.meta.url 的组合天然支持 base 路径，无需额外处理：

javascript 复制代码

// 在 /src/component.js 中
const logoUrl = new URL('/image/logo.png', import.meta.url).href;

// 开发环境：http://localhost:3000/image/logo.png
// 生产环境：https://your-domain.com/production/image/logo.png

原理解析：

import.meta.url 在构建时被处理

Vite 会将此属性替换为模块在输出目录中的最终路径（含 base）
路径解析发生在运行时
new URL() 基于处理后的基准 URL 动态计算完整路径
base 路径自动注入

Vite 在构建过程中确保所有资源路径包含配置的 base

四、实际应用场景

1. 安全加载静态资源

javascript 复制代码

// 获取图片资源（避免路径错误）
const getImage = (path) => 
  new URL(`./assets/${path}`, import.meta.url).href;

// 使用：<img src={getImage('banner.jpg')} />

2. 动态加载 Worker

javascript 复制代码

// 正确加载 Web Worker（绕过 CSP 限制）
const worker = new Worker(
  new URL('./image-processor.worker.js', import.meta.url),
  { type: 'module' }
);

3. 配置文件加载

javascript 复制代码

// 读取与模块同目录的配置文件
const loadConfig = async () => {
  const response = await fetch(
    new URL('config.json', import.meta.url)
  );
  return response.json();
}

五、为什么比传统路径更优？

方案	是否支持 base	构建依赖	动态路径
`new URL()`	✅ 自动	无需	✅
相对路径 `import`	❌ 需手动处理	需要	❌
绝对路径 `/public`	✅	无需	❌

六、注意事项

SSR 环境适配

在服务端渲染中需判断环境：

javascript 复制代码

const isBrowser = typeof window !== 'undefined';
const baseUrl = isBrowser ? import.meta.url : 'file://' + __dirname;

动态路径限制

路径参数不能使用模板字符串（构建时无法分析）：
javascript 复制代码
```
// 错误！构建工具无法预知路径
const dynamicPath = new URL(`./${name}.png`, import.meta.url);
```
浏览器兼容性

目前主流浏览器均支持，但 IE 等旧浏览器需要 polyfill。

七、总结

import.meta.url + new URL() 的组合是现代前端处理资源的最佳实践：

天然适配构建工具：Vite 的 base 配置自动生效
路径安全无忧：避免部署后的 404 错误
开发体验统一：开发/生产环境行为一致

在 Vite 等现代工具链中，这种模式已成为加载非 JS 资源的标准方案，完美解决了传统相对路径在构建部署时的路径适配问题。

思考题 ：当使用 Vite 的库模式打包时，import.meta.url 的行为会有何变化？欢迎在评论区讨论！