document.baseURI仅反映<base href>值，但fetch/import等运行时路径解析完全绕过它，仍以当前页面URL或模块位置为基准；JS中应使用环境变量或origin拼接，而非依赖document.baseURI。
document.baseURI 是唯一能拿到 <base href> 值的 JS 接口，但它不参与任何模块加载、fetch 或 import() 的路径解析——这些全走自己的规则，和 <base> 无关。
为什么 document.baseURI 不能用来构造 fetch 或 import 路径
浏览器明确区分 HTML 解析阶段和 JS 运行时：前者用 <base> 重写相对路径，后者完全绕过。即使你写了 <base href="/api/v2/">，fetch('./users') 仍以当前页面 URL 为基准，不是以 /api/v2/ 开始拼接。
-
fetch('./data.json')→ 解析为https://example.com/current/path/data.json（当前页面路径），不是/api/v2/data.json -
import('./utils.js')→ 以该模块所在文件位置为基准，和document.baseURI无任何关系 -
new URL('./config.json', document.baseURI)✅ 可以用，但这是你手动调用，不是运行时自动生效
JS 中需要动态拼接资源路径时，该用哪个值
不要依赖 document.baseURI 做通用路径前缀，它只在两种场景下可靠：
- 构造纯客户端 URL 对象：
new URL('logo.png', document.baseURI)→ 返回完整绝对地址 - 判断当前 HTML 是否被
<base>影响：document.baseURI !== window.location.href（说明有生效的<base>） - 其他所有情况，优先用
window.location.origin + '/subpath/'或构建时注入的环境变量（如__APP_BASE__）
特别注意：document.baseURI 在 <base href="https://cdn.example.com/v3/"> 下返回 CDN 地址，但你的 API 请求不该发到 CDN——这时候硬套 document.baseURI 就会错发请求。
立即学习“前端免费学习笔记（深入）”；
如何避免 <base> 和 JS 动态路径逻辑互相干扰
根本原则：HTML 层和 JS 层路径策略必须解耦。JS 不该假设自己“继承”了 <base> 的上下文。
- API 请求路径统一走配置项：
const API_BASE = import.meta.env.VITE_API_BASE || '/api/' - 静态资源（如图片、字体）若需动态加载，用
import.meta.env.BASE_URL（Vite）或process.env.PUBLIC_URL（CRA），而非document.baseURI - 禁止在 JS 里写
fetch(document.baseURI + 'data.json')——这会把 CDN 地址当 API 域名用，404 或 CORS 失败 - 如果真要复用
<base>的子路径（比如部署在/admin/），应由构建工具把该路径注入全局变量，而不是运行时读取document.baseURI
最易忽略的一点：<base href="/admin/"> 让 <img src="logo.png"> 加载正确，但 JS 里的 fetch('/admin/api/user') 是根相对路径，它压根不受 <base> 控制——这种混用会让开发者误以为“路径一致”，实际加载机制完全不同。
