base href不是加前缀，而是重置HTML解析器对后续纯相对URL的基准起点；必须为绝对URL或根相对路径（结尾带斜杠），置于<head>最前且唯一，否则静默失效导致404。
base href 不是加前缀，而是重置 HTML 解析起点
浏览器解析 HTML 时，遇到 <img src="logo.png"> 这类纯相对路径，会先查有没有生效的 <base href>。如果有且合法，就直接把 logo.png 拼到 base href 值后面，完全无视当前页面 URL。比如页面在 https://a.com/app/sub/page.html，但 <base href="/static/"> 生效，那 logo.png 就请求 https://a.com/static/logo.png，不是 /app/sub/logo.png。
这个行为不是“追加”，是“替换基准”。所以写错一个字符——比如少个结尾斜杠、多一个 ../——整个 <base> 就被静默丢弃，所有相对路径退回到按当前页面 URL 解析，上线后批量 404。
合法 href 值只有两种形式，其他全无效
浏览器对 <base href> 的校验极其严格，只认以下两类值：
-
https://cdn.example.com/v3/（绝对 URL，协议+域名+路径，结尾必须带/） -
/myapp/（根相对路径，开头必须是/，结尾也必须带/；写成/myapp或myapp/都不行）
以下全是非法写法，<base> 标签会被静默忽略：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
assets/（普通相对路径） -
../static/（含..） -
%PUBLIC_URL%/（未被构建工具替换时就是字面量字符串） -
https://example.com（结尾缺/，Firefox/Opera 会截断成/myappcss/类似错误）
它只管 HTML 静态属性，JS/CSS 里的路径完全不受控
<base> 只影响 HTML 解析器阶段的硬编码路径，不干预运行时逻辑：
- ✅ 影响：
<script src="app.js">、<link href="style.css">、<img src="icon.svg">、CSS 中的background: url(avatar.jpg) - ❌ 不影响：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、CSS@import "reset.css"
这意味着：你改了 <base href="/admin/">，但 JS 里还写 fetch('data.json')，它仍从当前页面 URL 发起请求，不是 /admin/data.json。这种割裂是线上 404 的常见根源。
位置和数量比内容还关键：必须唯一且放最前
<base> 必须出现在 <head> 最顶部，且只能有一个：
- 放在
<title>或<meta>后面？前面那些<link>已按原始 URL 解析完毕，<base>对它们完全无效 - 动态用 JS 插入
<base>？DOM 解析已开始，后续资源不会重新 resolve - 服务端模板拼出两个
<base>？只有第一个生效，其余被静默丢弃 - 写在
<body>里？浏览器直接忽略，连控制台警告都没有
验证是否生效，别看源码，直接在控制台执行 document.baseURI——返回值必须和你写的 href 完全一致，包括协议、域名、路径、结尾斜杠。
