base标签href值必须以http://、https://、//或/开头且结尾带/才合法，否则整条标签被静默丢弃；必须置于最前且唯一，仅影响其后HTML中纯相对路径，与前端路由配置需严格一致。
检查base标签的href值是否合法
浏览器对base href的校验是“全有或全无”：只要值不以http://、https://、//或/开头，整条标签就被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际全按当前页面 URL 解析，导致批量 404。
常见非法写法包括：assets/、../static/、subapp/、%PUBLIC_URL%（未被构建替换时就是字面量）、/myapp（结尾缺斜杠）。
-
/myapp/✅ 合法根相对路径（开头和结尾都必须是/） -
https://cdn.example.com/v3/✅ 绝对 URL（协议+域名+路径，结尾带/） -
//cdn.example.com/v3/✅ 协议相对 URL（自动继承当前页 http/https）
确认base标签的位置和数量是否正确
base只对它之后出现的相对 URL 生效，且必须在内、所有其他标签（包括<title></title>）之前；多个声明时仅第一个生效，其余被静默丢弃。
典型错误：
立即学习“前端免费学习笔记（深入）”；
-
<link href="main.css"> <base href="/app/">→main.css已按原始页面 URL 解析完毕，<base>对它无效 -
<base>写在里 → 浏览器直接忽略，不报错也不警告 - 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，完全无效
用 Ctrl+U 查看 HTML 源码，确认<base>是否位于第一行，且全文仅出现一次。
验证哪些资源真受base影响，哪些完全不受控
<base>只在 HTML 解析阶段起作用，只改写纯相对路径（既无协议、也无/开头）的硬编码属性。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。
✅ 真生效：<img src="logo.png" alt="快速排查HTML中base标签失效原因" >、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件里的background: url(icon.svg)（注意：这是 HTML 加载 CSS 时解析的，不是 CSS 引擎自己 resolve）
❌ 完全不受控：fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="/frame.html"></iframe>、<img srcset="logo-2x.png 2x" alt="快速排查HTML中base标签失效原因" >
⚠️ 半受影响：new URL('data.json', document.baseURI)可用，但window.location和history.pushState()的相对路径仍以当前页面 URL 为准。
排查 SPA 中base与路由配置是否割裂
<base href="/admin/">不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们根本不读document.baseURI，必须显式配置 base 参数，否则导航和资源加载行为割裂。
典型症状：
- HTML 中写了
<base href="/admin/">，但 Vue Router 没设base: '/admin/'→router.push('/home')跳到https://example.com/home，而非/admin/home -
<img src="logo.png" alt="快速排查HTML中base标签失效原因" >加载/admin/logo.png，但点击链接却跳到根路径，行为不一致
对应配置必须严格对齐：
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<router basename="/admin"></router> - Vite：
build.base或base配置项设为/admin/
若构建工具已配base（如 Vite 的build.base: '/admin/'），HTML 中再手动加<base href="/admin/">，极易引发双斜杠问题（如/admin//admin/js/app.js），服务端返回 404。
