base href必须是绝对URL或根相对路径，否则静默失效；仅影响HTML解析阶段的相对URL（如img、script、link、a及CSS background），不影响JS运行时fetch/import等；必须置于head最前且唯一。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器只接受 href 值以 http://、https://、// 或 / 开头，其他写法（比如 assets/、../static/、%PUBLIC_URL%/）会被整个忽略——控制台不报错，但所有 <img src="logo.png"> 都按当前页面 URL 解析，上线后批量 404。
-
https://cdn.example.com/v3/：最推荐，协议、域名、路径全明确，部署可控 -
/myapp/：合法根相对路径，结尾斜杠不能少（/myapp在 Firefox 里会被截断成/myappcss/） -
//cdn.example.com/v3/：协议相对，自动继承当前页是 http 还是 https -
file:///D:/project/dist/：仅限本地调试，部分浏览器对file://下的<base>支持不一致
base 标签必须放在 <head> 最前面，且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，资源就按原始页面 URL 加载，大概率 404。
- 正确顺序：
<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 运行时行为无关。
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<a href="about.html">、CSS 中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
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>控制——它直接拼到当前域名下，和href值无关
SPA 项目里别硬塞 base，优先走构建配置和路由参数
硬加 <base href="/myapp/"> 很容易让前端路由和资源加载行为打架。Vue Router v4+ 和 React Router v6+ 都要求显式传入 base 配置项（如 createRouter({ base: '/myapp/' })），它们不读 document.baseURI。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 构建时，用
publicPath或base配置自动注入<base>，比手写更可靠 - 服务端模板（如 Hugo）应确保
{{ .Site.BaseURL }}被真实值替换，而非字面量字符串 - 动态用 JS 插入（
document.head.appendChild(baseEl)）完全无效——HTML 解析早已结束，已创建的元素不会重算路径
document.baseURI 返回了正确值，不代表所有资源都加载成功。因为 CSS 的 @import、JS 的 import()、fetch() 全部绕过它，这些地方得单独处理路径逻辑。 
