标签不改变 window.location.href，但强制重写纯相对路径解析起点，非法值（如缺斜杠、非绝对路径）会静默失效，导致资源 404 或锚点跳转触发页面重载；其仅作用于 html 解析阶段，不影响 js 路由 api，需与构建配置、路由库 basename 严格对齐。
<base> 标签不会改变浏览器地址栏显示的当前 URL（即 window.location.href），但它会**强制重写所有后续纯相对路径的解析起点**，导致点击链接、加载资源、甚至锚点跳转时生成的最终 URL 与你预期严重偏离——尤其在子路径部署或 SPA 场景下，极易触发页面重载、404 或路由错位。
base href 非法值会导致静默失效，但地址栏看不出异常
浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他写法（如 assets/、../static/、/myapp 缺末尾斜杠）整条标签被丢弃，不报错、不警告，window.location.href 保持原样，但所有 <img src="logo.png"> 都退回到按当前页面 URL 解析，上线后批量 404。
-
/myapp❌ Firefox 会截断成/myappcss/app.css，必须写成/myapp/ -
https://cdn.example.com/v3❌ 缺末尾斜杠，部分浏览器拼接出错 -
assets/js/❌ 静默忽略，等同于没写 -
https://cdn.example.com/v3/✅ 推荐 CDN 场景 -
/myapp/✅ 合法根相对路径，结尾斜杠不可省
a href="#section" 在 base 下变成页面重载而非滚动
当存在 <base href="/myapp/"> 时，<a href="#section2"></a> 不再被识别为锚点，而是被解析为相对路径 /myapp/#section2。浏览器认为这是新 URL，于是发起一次完整导航请求，触发页面刷新、history pushState、Service Worker 拦截，甚至白屏。
- Network 面板可见对
/myapp/的空 HTML 请求（状态 200） - Vue Router / React Router 不响应，因路径变更未匹配其监听逻辑
- 修复方式不是删
<base>，而是：<a href="#section2" onclick="event.preventDefault(); document.getElementById('section2').scrollIntoView()"></a> - 或直接用
document.getElementById('section2').scrollIntoView()替代原生锚点
base 不影响 window.location，但 router.push() 仍可能错位
<base href="/admin/"> 对 window.location.href、history.pushState()、router.push('/home') 完全无影响——这些 API 的行为只取决于你传给路由库的 base 参数，和 document.baseURI 无关。
- Vue Router 必须显式配置
createWebHistory('/admin/') - React Router v6+ 必须用
<router basename="/admin"></router> - 若只配了 HTML 中的
<base href="/admin/">而没配路由，router.push('/home')会跳到https://example.com/home，不是/admin/home - Vite 已设
build.base: '/admin/'，HTML 中再加<base>可能引发双斜杠（如/admin//admin/js/app.js）
真正容易被忽略的是：base 的作用时机仅限 HTML 解析阶段，且只改写纯相对路径；它既不修改运行时地址，也不同步任何 JS API。一旦部署路径、构建配置、路由参数三者中任一不严格对齐，错误就藏在 Network 请求里，而不是控制台中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
