base href值不是以/或http(s)://开头就静默失效；浏览器严格校验，仅接受http://、https://、//或/开头的合法值，否则丢弃标签且零提示，导致所有相对路径按当前页url解析而批量404。
base href值不是以/或http(s)://开头就静默失效
浏览器对 <base href> 的校验极其严格：只要值不以 http://、https://、// 或 / 开头，整条标签会被直接丢弃，且控制台零提示、Network 面板无异常标记。此时所有相对路径（如 <img src="logo.png">）退回到按当前页面 URL 解析——部署在子路径（如 https://example.com/admin/）时，logo.png 就会请求 https://example.com/admin/logo.png 而非预期的 https://example.com/admin/assets/logo.png，批量 404。
常见无效写法包括：
-
<base href="assets/">（缺协议和根斜杠） -
<base href="../static/">（含..，规范禁止） -
<base href="/myapp">（结尾无/，Firefox/Opera 会截断成/myappcss/app.css） -
<base href="%PUBLIC_PATH%/">（构建未替换，浏览器收到字面量字符串）
base标签位置错或重复声明等于没写
<base> 必须放在 最顶部，且只能有一个。它只对之后出现的相对 URL 生效；若前面已有 <link> 或 <script></script>，那些资源已按原始页面 URL 解析完毕，<base> 对它们完全无效。
错误场景示例：
-
<link rel="stylesheet" href="main.css"> <base href="/app/">→main.css已加载失败 -
<base href="/app/">→ 浏览器直接忽略 - 两个
<base>标签 → 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used.
误以为base能管JS/CSS里的路径
<base href> 仅影响 HTML 解析阶段的属性值（src、href、action 等），对运行时行为完全无感。这意味着：
-
fetch('./api/user')仍按window.location解析，不受document.baseURI影响 - CSS 中的
@import "reset.css"和background: url(avatar.jpg)是两回事：@import不受控，而background: url()在 HTML 解析 CSS 文件时被处理，**才**受<base>影响（前提是该 CSS 是通过<link href>加载的） -
import('./utils.js')、new Worker('./worker.js')全部绕过<base>
base和前端路由配置不一致引发路径割裂
Vue Router 的 createWebHistory('/admin/') 和 React Router v6+ 的 <router basename="/admin/"></router> 是独立机制，它们不读取 document.baseURI。如果只配了 <base href="/admin/"> 却没设路由 basename，结果就是：
-
<img src="logo.png">正确加载为/admin/logo.png -
router.push('/home')却跳转到https://example.com/home（白屏）
更危险的是反向操作：只配路由 basename，但漏掉 <base>，静态资源（chunk JS/CSS）因 publicPath 未对齐而 404。Vite/Webpack 构建时若已设 base: '/admin/'，HTML 中再手动加 <base href="/admin/">，反而可能触发双重拼接风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
