base href 值不合法即被浏览器静默丢弃，仅接受以 http://、https://、// 或 / 开头的合法值；必须置于 head 最前且唯一；SPA 子路径部署时需与路由配置及构建工具 publicPath 严格对齐。
base href 值不合法就等于没写，浏览器静默丢弃
浏览器对 <base href> 的校验极其严格：只要值不是以 http://、https://、// 或 / 开头，整条标签就被直接忽略——控制台零提示，但所有 <img src="logo.png">、<script src="app.js"> 都退回到按当前页面 URL 解析，上线后批量 404。
常见无效写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..） -
href="subapp/"（既非绝对也非根相对） -
href="%PUBLIC_PATH%/"（构建未替换，字面量发到浏览器）
真正合法的只有两种形式：
-
href="/myapp/"：根相对路径，开头必须是/，结尾必须带/；否则 Firefox/Opera 会截断路径（如css/app.css变成/myappcss/app.css） -
href="https://cdn.example.com/v3/"：绝对 URL，协议、域名、路径全明确，CDN 场景最稳妥
base 标签必须放 最前面，且只能有一个
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，等于没配。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
-
<head><title>App</title><base href="/myapp/"></head>→<title>后的资源已解析完毕，不受控 -
<body><base href="/myapp/"></body>→ 浏览器直接忽略 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，但第二个完全失效
正确顺序示例：
<head> <base href="/myapp/"> <title>My App</title> <link href="style.css"> <script src="app.js"></script> </head>
SPA 部署在子路径时，base、路由配置、构建工具三者必须对齐
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们根本不读 document.baseURI，必须显式传入 base 或 basename 参数。否则行为割裂：
-
<img src="logo.png">加载/admin/logo.png -
router.push('/home')却跳到https://example.com/home（而非/admin/home）
对应配置必须严格一致：
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<Router basename="/admin/"> - Vite：
build.base或base配置项设为/admin/ - Webpack：
output.publicPath设为/admin/
⚠️ 构建工具 publicPath / base 和手写 <base href="/admin/"> 若值相同，资源路径会被拼两次，例如预期 /admin/js/app.js，实际请求 /admin//admin/js/app.js（双斜杠），导致 404。
base 标签只影响 HTML 解析阶段的纯相对路径，JS/CSS 运行时不生效
<base> 不是全局 URL 代理，它仅在 HTML 解析阶段起作用，且只改写属性中“纯相对路径”（即不以 /、: 或协议开头的字符串）。
✅ 真正受影响的：
<img src="icon.svg"><script src="bundle.js"><link href="theme.css">- CSS 中的
background: url(avatar.jpg)（这是唯一穿透到 CSS 的情况）
❌ 完全不受影响的：
fetch('./api/data.json')import('./utils.js')@import "reset.css"-
<iframe src="page.html">（它的src相对于 iframe 当前 URL）
⚠️ 特别注意：<a href="/admin"> 是根绝对路径，根本不受 <base> 控制；而 <a href="#"> 在 <base href="/sub/"> 下会被解析为 /sub/#，可能触发无意义页面重载（地址栏变灰、滚动回顶）。
