base标签仅在HTML解析阶段生效，仅重写img、script、link等标签中纯相对路径（如logo.png）的解析基准，必须为绝对URL或根相对路径（结尾带/），否则静默失效；不影响fetch、import、@import等运行时路径。
base 标签只在 HTML 解析阶段生效，不是全局 URL 重写器
它不改变 window.location、不干预 JS 运行时行为、也不影响 CSS 引擎对 @import 或 url() 的解析逻辑。它的作用窗口非常窄：仅限浏览器解析 HTML 文档时，对特定属性中「纯相对路径」做一次性的基准拼接。
常见误判是以为设了 <base href="/app/"> 就能“统一管理所有路径”——结果 fetch('./api') 仍按当前页面 URL 发请求，import('./utils.js') 依然从模块自身位置加载，CSS 里的 background: url(logo.png) 也照旧相对于 CSS 文件路径解析。
真正受控的只有那些硬编码在 HTML 标签属性里、且不含协议、不以 / 开头的值：
-
<img src="icon.png">→ 拼成/app/icon.png -
<script src="main.js">→ 拼成/app/main.js -
<link href="style.css">→ 拼成/app/style.css -
<form action="submit.php">→ 拼成/app/submit.php -
<meta http-equiv="refresh" content="0;url=done.html">→ 跳转到/app/done.html
href 值必须是绝对 URL 或根相对路径（结尾带 /）
写错 href 不会报错，而是被浏览器静默丢弃——你看到的全是 404，控制台却空空如也。
立即学习“前端免费学习笔记（深入）”；
合法写法只有两类：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<base href="https://cdn.example.com/v3/">✅ 推荐，CDN 场景最稳 -
<base href="/myapp/">✅ 根相对，部署子路径时需同步改
以下全部无效：
-
<base href="assets/">❌ 缺协议和根斜杠，被忽略 -
<base href="../static/">❌ 含..，规范禁止 -
<base href="https://example.com">❌ 结尾无/，Firefox 可能截断为https://example.comcss/app.css
放错位置或重复声明等于没写
<base> 必须是 <head> 的第一个直接子元素，且全文只能有一个。
典型翻车点：
- 放在
<body>里 → 浏览器完全忽略，无提示 -
<head><link href="main.css"><base href="/app/"></head>→main.css已按原始页面 URL 解析完毕，<base>对它无效 - SSR 模板拼接导致两个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，第二个白写 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 已解析的标签不受影响，只对后续新创建的元素起作用
SPA 部署时最容易被忽略的协同陷阱
前端路由、构建配置、Service Worker 和 <base> 四者必须严格对齐，否则资源 404 或路由跳转错位。
关键检查点：
- Vue Router / React Router v6+ 必须显式配置
base: '/subpath/'，否则router.push('/home')会跳到根路径 - Vite 构建时若已设
build.base: '/subpath/'，HTML 中就不该再手动写<base href="/subpath/">，否则路径可能被拼两次（如/subpath//subpath/js/app.js） - Webpack 的
publicPath若与<base href>值相同，也可能引发双重拼接 - Service Worker 的预缓存列表若依赖
self.location.origin + '/subpath/'，但 HTML 没配<base>，缓存路径就全错
最隐蔽的问题往往出在 DevTools Network 面板里：你以为 <img src="logo.png"> 加载的是 /subpath/logo.png，但实际发出的请求地址可能来自 HTML 源码里未被 <base> 覆盖的旧路径——务必看 Network 请求的真实 URL，而不是靠推测。
