base href值不合法时浏览器静默丢弃，导致所有相对路径按当前页URL解析而批量404；合法值必须以http://、https://、//或/开头且结尾带/，且<base>须位于<head>最前、唯一存在。
base href 值不合法时浏览器直接静默丢弃
浏览器对 <base> 的 href 值校验极严：只要不是以 http://、https://、// 或 / 开头，整条标签就被丢弃——控制台无报错、无警告，但所有后续 src="logo.png" 仍按当前页面 URL 拼接，上线后批量 404。
常见无效写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..，不被识别） -
href="https://example.com"（结尾无/，Firefox 可能截断为https://example.comcss/） -
href="%PUBLIC_URL%/"（未被服务端或构建工具替换，字面量发到浏览器）
✅ 合法写法必须满足两个条件：协议/根路径开头 + 结尾带 /。例如：href="/myapp/"、href="https://cdn.example.com/v3/"、href="//cdn.example.com/v3/"。
base 标签必须在 head 最顶部且只能有一个
<base> 的作用时机是 HTML 解析自上而下的过程，它只影响其后出现的相对 URL。位置或数量出错，等于没写。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
- 放在
<title>或<meta>后面 → 已解析的<link href="style.css">不受任何影响 - 塞进
<body>→ 浏览器直接忽略，无提示 - SSR 模板拼接或 Vue 组件中重复注入两个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，已加载的资源不会重算
正确顺序示例：<head><base href="/myapp/"><title>App</title><link href="main.css"><script src="app.js"></head>。
哪些属性真正参与 base 拼接，哪些完全不参与
<base> 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
✅ 真正受影响（会按 base href 重新拼接）：
<img src="icon.png"><script src="app.js"><link href="style.css"><form action="submit.php">- CSS 文件内
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响（始终按当前页面 URL 或自身上下文解析）：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')- CSS 中
@import "reset.css" -
<iframe src="/admin/frame.html">（根相对路径，不参与 base 拼接）
SPA 部署时 base href 与路由、构建配置的冲突点
单页应用部署在子路径（如 https://a.com/myapp/）时，<base href="/myapp/"> 很容易和其它机制打架：
- Vue Router / React Router v6+ 的
base配置项与 HTML<base>是两套独立机制，只设一个，另一个大概率出问题 - Webpack 的
publicPath若也设为/myapp/，而 HTML 又写了<base href="/myapp/">，资源路径可能被拼两次，变成/myapp/myapp/js/app.js - Service Worker 缓存策略若依赖
self.location.origin + '/myapp/'，但 HTML 没配<base>，预缓存路径就错位 - 本地开发用
http://localhost:3000/作base href更安全，避免和后端路由冲突；但上线后必须切换为根相对路径或绝对 CDN 地址
最易被忽略的是：CSS 中 url() 虽然受 <base> 影响，但该影响发生在 HTML 解析阶段，而非 CSS 加载后；如果 CSS 是通过 <link> 引入的，它的 url() 会按 <base> 拼接；如果是内联 <style> 且在 <base> 之前，则不会。
