会使 fetch、import()、img.src 等相对路径以 base href 为基准解析，导致请求错误；window.location、history.pushstate 和内联 js 字符串 url 不受影响；安全使用需确保所有路径与 base 语义一致，推荐构建工具统一配置 base。
不是。设了 <base> 标签不等于路径问题自动消失，反而可能让相对路径在脚本、样式、图片甚至 fetch 请求中悄悄失效或指向错误地址。
为什么 <base href="..."> 会影响 JS 里的相对路径
浏览器解析所有相对 URL（包括 fetch('./api/user')、import('./utils')、new Image().src = 'icon.png'）时，都会以 <base> 指定的 href 为基准，而非当前 HTML 文件所在路径。
- 常见错误现象：
fetch('./data.json')返回 404，但控制台显示请求地址是https://example.com/api/data.json（而非你预期的同目录） - ESM 动态
import()中用相对路径会直接报TypeError: Failed to resolve module specifier -
<img src="logo.svg">加载失败，实际请求的是https://example.com/logo.svg，而文件其实在/static/logo.svg
哪些地方不受 <base> 影响？
不是所有相对路径都走 base —— 关键看解析主体是谁：
-
window.location.href、history.pushState()的相对路径：不受影响，仍以当前页面 URL 为基准 - CSS 里
background: url('bg.png')：受<base>影响（但多数现代浏览器已按规范处理为相对于 CSS 文件位置，存在兼容差异） -
<a href="page.html"></a>和<link rel="stylesheet" href="main.css">：明确受<base>控制 - 内联
style或 JS 字符串拼接的 URL（如el.style.background = 'url(img.png)'）：不受影响，纯字符串，不被浏览器解析为 URL
怎么安全地用 <base>？
核心原则：让所有需要解析的相对路径，和 <base> 的 href 保持语义一致。否则宁可不用。
- 如果站点部署在子路径（如
https://example.com/my-app/），<base href="/my-app/">是合理选择，但必须确保所有静态资源、API 路径都按此前缀组织 - 避免用
<base href="./">—— 它等价于当前页面 URL 去掉文件名，但页面可能是/a/b/c.html或/a/b/，结果不可控 - 前端路由（如 React Router、Vue Router）启用
basename时，务必与<base>的href值严格一致，否则pushState和链接跳转会错位 - 构建工具（Vite、Webpack）中配置
base选项（如base: '/my-app/'）比手动写<base>更可靠，因为它们会重写所有生成的资源路径
调试时最该检查的三处
遇到资源 404 或跨域请求失败，先盯住这些地方：
- 浏览器开发者工具 Network 面板里，点击失败请求 → 看 **Initiator** 列：是 HTML 解析触发的，还是 JS 代码触发的？前者大概率受
<base>影响，后者要看 JS 里是否用了相对路径 - 在控制台执行
document.baseURI，确认当前生效的 base 地址是否符合预期 - 检查是否有多个
<base>标签 —— 只有第一个生效，后面的会被忽略，但容易误判
真正麻烦的不是设不设 <base>，而是设了之后，JS 里一个没注意的 './config.json' 就变成生产环境静默失败。它不报错，只发错请求。
