base href必须是绝对URL或根相对路径（以/开头且结尾带斜杠），否则浏览器静默忽略；必须置于<head>最顶部且唯一；仅影响HTML解析阶段的纯相对URL（如src、href），对JS/CSS运行时路径无效。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器只认 href 值以 http://、https://、// 或 / 开头的写法。其他任何格式——比如 static/、../assets、%PUBLIC_URL%/、甚至 https://example.com（结尾没斜杠）——整条 <base> 都会被丢弃，不报错、不警告，但所有 src="logo.png" 全部退回到按当前页面 URL 解析，上线后批量 404。
常见翻车点：
-
href="assets/"：缺协议和根斜杠，无效 -
href="../static"：含..，被忽略 -
href="/myapp"：结尾没斜杠，Firefox/Opera 会截断成/myappcss/导致 CSS 路径错乱
✅ 推荐写法只有两类：href="https://cdn.example.com/v3/"（部署可控）、href="/myapp/"（根相对，必须带尾斜杠）。
base 标签必须放在 <head> 最顶部且唯一
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，等于没写。
立即学习“前端免费学习笔记（深入）”；
典型错误：
-
<head><link href="main.css"><base href="/app/"></head>：main.css已解析完毕，不受控 -
<body><base href="/app/"></body>：浏览器直接忽略 - SSR 模板拼接时 header 和 page 各 render 一个
<base>：Chrome 控制台提示Multiple base elements detected. Only the first one is used.，但第二个完全失效
正确顺序：<head><base href="/myapp/"><title>App</title><link href="style.css"></head>
哪些资源真受影响，哪些完全不管
<base> 只在 HTML 解析阶段起作用，它改写的是浏览器对 src、href、action 等属性中**纯相对路径**（即不以 /、: 或协议开头）的初始解析逻辑，不是运行时重写。
✅ 明确受影响：
<img src="logo.png"><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="/subapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。这两套前端路由根本不读 document.baseURI，也不会根据 <base> 自动修正导航行为。
漏配后果明显：
- HTML 里写了
<base href="/subapp/">，但路由没配base，资源加载走/subapp/js/app.js，点击链接却跳到/home，路径割裂 - 刷新页面时，如果服务器没 fallback 到
index.html，直接 404
必须显式配置：
- Vue Router：
createRouter({ base: '/subapp/' }) - React Router v6+：
<Router basename="/subapp">
构建工具如 Vite 的 build.base 和 HTML 中的 <base> 也不可共存，否则导致路径重复——Vite 默认已注入 <base>，再手动加一条就是双倍前缀。
