<base> 标签仅重置 HTML 解析阶段纯相对路径的基准 URL，必须为绝对 URL 或根相对路径且置于 <head> 最前；它不影响 fetch、import 等运行时路径，SPA 路由需单独配置 base 参数。
<base> 标签不是“让相对路径变好用”的工具，而是重置 HTML 解析器对所有纯相对路径的基准起点——设错值、放错位置、或和构建/路由配置冲突，<img src="logo.png"> 就会静默 404，且浏览器通常不报错。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 https://、http://、// 或 / 开头的 href 值。其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被整条忽略，不警告、不报错，后续所有 src/href 都退回到用当前页面 URL 解析。
-
https://cdn.example.com/v3/✅ 推荐：协议、域名、路径、尾斜杠全明确，部署稳定 -
/myapp/✅ 合法：适用于 SPA 部署在子路径，结尾斜杠不能少（/myapp在 Firefox 中可能被截成/myappcss/） -
//cdn.example.com/v3/✅ 协议相对，自动继承http:或https: -
assets/js/❌ 静默失效 -
../dist/❌ 静默失效
base 标签必须放在 <head> 最前面，且只能有一个
<base> 的作用发生在 HTML 解析阶段，只对它之后出现的标签生效。放错位置等于没写。
- 正确顺序：
<head><base href="/myapp/"><title>App</title><link href="main.css"></head> - 错误：放在
<meta>或<title>后面 → 已解析的<link>不受控 - 错误：放进
<body>→ 浏览器直接忽略 - 错误：多个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. - 错误：用 JS 动态插入（如
document.head.appendChild()）→ 解析早已结束，完全无效
哪些路径真受影响，哪些根本不受影响
<base> 只在 HTML 解析时改写纯相对路径（即不以 /、: 或协议开头的字符串），它不是全局代理，也不穿透到运行时。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<form action="submit.php">、CSS 中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js')、<iframe src="page.html"> - ⚠️ 半受控：
document.baseURI返回<base href>的值，可用于new URL('data.json', document.baseURI)，但window.location和路由跳转行为与此无关
SPA 项目中 base 和前端路由必须显式对齐
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们根本不读 document.baseURI。
- Vue Router v4+：必须显式传入
createRouter({ base: '/myapp/' }) - React Router v6+：
<Router basename="/myapp">，否则router.push('/home')会跳到根路径 - Webpack/Vite 的
publicPath或base配置若与 HTML 中的<base>值重复，会导致路径拼接两次（如/myapp//myapp/js/app.js） - 服务端模板（如 Hugo、SSR）若重复注入
<base>，只有第一个生效，其余静默丢弃
最危险的点不是不会用，而是用了却不知道它在哪起效、在哪失效——比如以为设了 <base href="/cdn/"> 就能管住 fetch()，结果接口全挂；或者在 Vue 项目里只配了 HTML 的 <base> 却漏掉 createRouter({ base })，导致路由跳转和资源加载各走各的路。
