base href值必须是绝对URL或根相对路径（结尾带斜杠），仅以https://、http://、//或/开头才被识别，否则静默忽略导致批量404；必须置于<head>最前且唯一，仅影响HTML解析阶段的纯相对路径属性。
base href 值必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 https://、http://、// 或 / 开头的 href 值，其他写法（比如 assets/、../static/、%PUBLIC_URL%/）会被静默忽略——不报错、不警告，但后续所有 <img src="logo.png"> 都退回到用当前页面 URL 解析，上线后批量 404。
常见错误：
-
/myapp缺尾斜杠 → Firefox/Opera 可能截断成/myappcss/，导致style.css请求路径错乱 -
https://cdn.example.com/v3缺尾斜杠 → 同样可能被截断，应写成https://cdn.example.com/v3/ -
//cdn.example.com/v3/合法，协议相对，适合多协议环境 -
/看似安全，但在 GitHub Pages 子目录（如https://user.github.io/repo/）下会指向根域，必然 404
base 标签必须放在 <head> 最顶部且唯一
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，这个动作只在解析阶段生效，且仅对它之后出现的标签起效。放错位置等于没写。
正确顺序示例：
立即学习“前端免费学习笔记（深入）”；
<head> <base href="/myapp/"> <title>My App</title> <link rel="stylesheet" href="main.css"> <script src="app.js"></script> </head>
错误情况：
- 放在
<meta>或<title>后面 → 部分浏览器跳过已解析的<link>，资源仍按原始 URL 加载 - 放进
<body>→ 浏览器直接忽略，无提示 - 多个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild()）→ 解析阶段早已结束，完全无效
哪些属性真正受 base 影响，哪些完全不受
<base> 不是全局路径重写器，它只在 HTML 解析阶段改写纯相对路径（即不以 /、: 或协议开头的字符串），对运行时行为毫无作用。
✅ 真正受影响（HTML 属性中硬编码的相对路径）：
<img src="logo.png"><script src="app.js"><link href="style.css"><a href="about.html"><form action="submit.php">- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响（JS/CSS 运行时路径）：
fetch('./api/user')import('./utils.js')@import "reset.css"new Worker('./worker.js')document.createElement('img').src = 'logo.png'-
<iframe src="/admin/frame.html">（含前导斜杠，已是绝对路径）
SPA 部署时 base 与构建工具、路由配置必须严格对齐
单页应用部署到子路径（如 https://example.com/myapp/）时，<base href="/myapp/"> 只解决 HTML 中静态资源加载问题，但 JS 动态加载、路由跳转、chunk 地址仍需同步配置，否则路径重复或跳转失效。
典型冲突场景：
- Vite 已设
build.base: '/myapp/'，再手动加<base href="/myapp/">→ 资源路径被拼两次（如/myapp//myapp/assets/index.js） - Webpack
publicPath: '/'，但 HTML 里写<base href="/myapp/">→ runtime chunk 从/myapp/加载，而实际文件在/下，404 - Vue Router 未传
createWebHistory('/myapp/')→router.push('/home')跳到https://example.com/home，而非/myapp/home - Service Worker 预缓存路径依赖
self.location.origin + '/myapp/'，但 HTML 没配<base>→ 缓存路径与实际请求不一致
验证是否生效，别只看源码：打开控制台执行 document.baseURI，返回值必须和你写的 href 完全一致（协议、域名、路径、尾斜杠一个都不能少）；Network 面板里 404 请求的 Initiator 是 HTMLParser 才说明是 <base> 解析失败，不是 JS 写错了。
