如何在浏览器的ES6模块中将相对路径解析为绝对URL？

嘿，这个问题问到点子上了！在浏览器环境的ES6模块里处理相对路径转绝对URL，尤其是当你的代码可能部署在仓库子路径（比如base-url.com/repo/）而非域名根目录时，有个既标准又省心的方案，我平时推荐给很多开发者：

核心方案：用import.meta.url + URL构造函数 #

ES6模块自带的import.meta.url属性，会返回当前模块文件的完整绝对URL——不管你的代码是从域名根目录加载，还是从某个仓库子路径加载，它都能准确拿到当前模块的加载地址。

结合浏览器原生的URL构造函数，就能轻松把任意相对路径解析成绝对URL。比如在你的module1.js里，resolveUrl函数可以这么写：

function resolveUrl(relativePath) {
  // 利用URL构造函数，以当前模块的绝对URL为基准解析相对路径
  return new URL(relativePath, import.meta.url).href;
}

用法示例 #

假设module1.js的加载地址是https://base-url.com/repo/src/module1.js：

• 解析同级文件：resolveUrl('./utils.js') → 返回https://base-url.com/repo/src/utils.js
• 解析上级目录资源：resolveUrl('../assets/logo.png') → 返回https://base-url.com/repo/assets/logo.png
• 解析根路径资源：resolveUrl('/global-style.css') → 返回https://base-url.com/global-style.css

为什么这个方案靠谱？ #

• 完全符合标准：import.meta.url是ES模块的标准属性，URL构造函数是浏览器原生API，不用依赖任何第三方库，兼容性覆盖所有现代浏览器。
• 自动处理边界情况：不管是.、../这类相对路径标识，还是绝对路径（以/开头），URL构造函数都会按照标准的URL解析规则处理，不用你自己写容易出错的字符串拼接逻辑。
• 适配任意部署路径：不管你的代码是部署在域名根目录，还是像仓库子路径这种非根目录，import.meta.url都会自动获取当前模块的真实加载地址作为解析基准，完全不用手动配置base URL。

注意事项 #

• 这个方法只能在ES6模块中使用（也就是你的脚本标签要加type="module"），普通的脚本文件里没有import.meta对象。
• 如果你的相对路径是一个完整的绝对URL（比如https://example.com/file.js），URL构造函数会直接返回这个URL，忽略base参数，这也符合预期。

内容的提问来源于stack exchange，提问作者Yairopro