标签写错会静默失效，导致所有相对路径资源按当前页面url解析而批量404；需确认其href值以http://、https://、//或/开头且结尾带/，位于最前且唯一。
<base> 标签写错，不是报错，而是静默失效——所有 src="logo.png"、href="style.css" 全部退回到按当前页面 URL 解析，上线后批量 404。问题不在“有没有写”，而在“写得对不对、放得对不对、用得对不对”。
怎么快速确认 <base href> 是否生效
浏览器对 <base> 的校验是“全有或全无”：只要 href 值不以 http://、https://、// 或 / 开头，整条标签就被丢弃，控制台零提示。
- 打开开发者工具 → Elements → 展开
，看最顶部是否真有<base href="..."> - 检查
href值是否符合任一合法格式：https://cdn.example.com/v3/、//cdn.example.com/v3/、/myapp/ - 特别注意结尾斜杠：
/myapp❌（Firefox 会截断成/myappcss/），/myapp/✅ - 如果值是
assets/、../static/、%PUBLIC_URL%/（未被构建替换时）——等于没写
<base> 必须在
<base> 只影响它之后出现的相对路径，解析顺序错了，前面的资源就已按原始 URL 加载完毕。
- 错误位置：
<title>Page</title> <base href="/app/">→<title></title>前没有<base>，且若之前已有<link href="main.css">，它已解析完成 - 绝对禁止放在
里，浏览器直接忽略，无任何提示 - 多个
<base>声明？只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，完全无效
哪些路径真受 <base> 控制，哪些根本不管
<base> 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”的初始拼接逻辑。
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件中background: url(avatar.jpg)（注意：这是 HTML 加载 CSS 时解析的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>（根相对路径）、<img srcset="logo-2x.png"> - ⚠️ 半受影响：
document.baseURI会返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和history.pushState()仍以当前页面 URL 为准
SPA 部署子路径时，<base> 和路由/构建配置必须严格对齐
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们根本不读 document.baseURI，必须显式配置。
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<router basename="/admin"></router> - Vite：
build.base或base配置项设为/admin/，此时 HTML 中再写<base href="/admin/">属于冗余，容易引发双斜杠（如/admin//admin/js/app.js） - Webpack：
publicPath若也设为/admin/，和手写<base>叠加，同样导致路径重复拼接 - 更稳妥做法：只用构建工具统一控制资源前缀（如 Vite 设
build.base = "/admin/"），HTML 中不写<base>；或仅用<base>控制静态资源，构建工具设publicPath: ""
最容易被忽略的是：它不报错、不警告、不重试，只默默把所有相对路径“还给”当前页面 URL。排查时别盯着 Network 面板里看起来“正常”的请求路径，先确认 <base> 是否真的存在、是否真的合法、是否真的在正确位置——三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
