<base> 标签重置 HTML 解析器对后续相对 URL 的基准起点，必须置于 <head> 最前且唯一，仅影响其后 HTML 属性中的纯相对路径（如 src、href），不作用于 JS/CSS 运行时路径，错误配置将导致静默 404。
<base> 标签不是“加前缀”，而是重置 HTML 解析器对所有后续相对 URL 的基准起点。设错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
base href 必须是绝对 URL 或根相对路径，否则整条标签被静默忽略
浏览器只接受 href 值以 https://、http://、// 或 / 开头。其他写法（如 assets/、../static/、%PUBLIC_URL%/）一律被丢弃，不警告也不报错，资源退回到按当前页面 URL 解析——上线后批量 404。
-
https://cdn.example.com/v3/：最稳妥，协议、域名、路径明确，适合 CDN 场景 -
/myapp/：合法根相对路径，结尾斜杠不能少（/myapp在 Firefox 中可能被截断成/myappcss/） -
//cdn.example.com/v3/：协议相对，自动继承当前页 http/https，适合多协议环境 -
file:///D:/project/dist/：仅限本地调试，部分浏览器对file://下的<base>支持不一致
base 标签必须放在 <head> 最前面，且只能有一个
<base> 影响的是 HTML 解析阶段的顺序逻辑：它只对它之后出现的相对 URL 生效。放错位置或重复声明，等于没写。
- 正确顺序：
<head><base href="/myapp/"><title>App</title><link href="style.css"></head> - 错误示例：
<head><link href="main.css"><base href="/myapp/"></head>→main.css已解析完毕，不受控 - 禁止放在
<body>里——浏览器直接忽略 - 多个
<base>时，只有第一个生效；Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
base 只影响 HTML 属性中的纯相对路径，对 JS/CSS 运行时路径无效
这是最容易误判的一点：<base href="/cdn/"> 不会让 fetch('./api/data.json') 或 import('./utils.js') 自动带上前缀。它只作用于 HTML 解析时的属性值。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="icon.svg">、<script src="bundle.js">、<link href="theme.css">、<form action="submit.php">、CSS 中的background: url(avatar.jpg)（这是唯一穿透到 CSS 的情况） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html">（它的src相对于 iframe 当前 URL） - ⚠️ 特别注意：
href="/admin"这种根相对路径，根本不受<base>控制——它直接拼到当前域名下
SPA 部署时别硬塞 base，优先走构建配置和路由参数对齐
硬加 <base href="/myapp/"> 很容易让前端路由（如 Vue Router 的 history 模式）和资源加载行为打架。比如刷新页面时，服务端返回 404，而 JS 资源又因 <base> 错位加载失败。
- Vue Router / React Router 的
base参数必须与<base href>值严格一致（如都设为/myapp/） - Vite/Webpack 应通过
base配置项生成 HTML，而非手动写死<base> - 服务端模板（如 Hugo、Nunjucks）中用变量注入，确保
previewBase是合法值且已解析完成 - 禁用 JavaScript 动态插入：
document.head.appendChild(baseEl)—— 解析阶段早已结束，无效
真正麻烦的不是写错 href，而是它静默失效：没报错、没警告、资源全挂，你得逐个检查 document.baseURI、<head> 顺序、构建输出内容，再比对网络请求的实际路径。这种问题往往卡在上线前最后一刻。
