base标签强制劫持所有相对url解析，以href属性为基准，影响href、src、form action及new url()等，但不影响location.replace/assign；必须设为含协议和末尾斜杠的绝对url，否则导致资源加载异常。
base 标签会劫持所有相对 URL 的解析逻辑
只要页面中存在 <base href="...">，所有相对路径的 href、src、form action、甚至 JavaScript 中用 new URL('./path', document.baseURI) 构造的地址，都会以 base.href 为基准解析，而不是当前页面 URL。这不是“建议”或“默认”，是浏览器强制行为。
常见错误现象：
– 页面本身通过 window.location.href = '/login' 跳转，但跳转后所有按钮链接突然指向错误域名；
– 后端返回 302 重定向到 /dashboard，但页面里一个 <a href="profile"></a> 点开却去了 https://cdn.example.com/profile（因为 base 设了 CDN 域名）。
- 使用场景：多见于单页应用（SPA）静态托管、CDN 加速部署、或需要统一资源前缀的构建流程
- 必须确保
base.href是完整、合法的绝对 URL（含协议和斜杠结尾），例如https://app.example.com/，不能是https://app.example.com（缺末尾 / 会导致相对路径拼接异常） - 若页面本身由重定向到达（如从
/old301 到/new），base不会自动更新 —— 它只读取 HTML 源码中写的值，与导航过程无关
location.replace 和 location.assign 不受 base 标签影响
base 标签只作用于 HTML 解析阶段的相对 URL 解析，对 JavaScript 中直接赋值 window.location.href、调用 location.replace() 或 location.assign() 完全无效。这些 API 接收的字符串始终按标准 URL 规则解析。
但容易踩的坑在于混淆“跳转目标”和“跳转后页面内链接行为”：
- 你用
location.replace('/logout')成功跳到了新页面 → 这步没问题 - 但新页面 HTML 里写了
<base href="https://legacy.example.com/">→ 那么该页面所有相对链接都会锚定到 legacy 域名 - 也就是说：
base不影响“你怎么跳过来”，只影响“你跳过来之后，页面里的链接往哪点”
服务端重定向（301/302）与 base 标签无直接交互
HTTP 状态码重定向发生在网络层，浏览器收到响应头 Location: /new-path 后，会用当前请求 URL 作为上下文解析这个路径，base 标签此时还没被 HTML 解析器读到，完全不参与该过程。
真正危险的组合是：服务端重定向 + 前端路由 + base 标签错配。例如：
- 用户访问
https://example.com/app，服务端 302 到https://example.com/ - 首页 HTML 包含
<base href="/app/"> - 结果：所有
<script src="main.js"></script>尝试加载https://example.com/app/main.js，但实际资源在根目录 → 404
这种问题不会报错提示 “base 冲突”，只会静默失败或加载错资源。
Vue Router / React Router 的 base 配置和 HTML base 标签不是一回事
框架路由的 base 选项（如 Vue Router 的 createRouter({ history: createWebHistory('/admin') })）只控制前端路由匹配前缀，不改变 HTML 中 <base> 的行为。两者可以同时存在，但也可能互相干扰：
- HTML 中
<base href="/admin/">→ 所有相对资源路径都加/admin/前缀 - Vue Router 设置
base: '/admin'→router.push('/user')实际导航到/admin/user - 但如果静态资源本应放在根目录，而 HTML base 强制加了前缀，就会导致 JS/CSS 加载 404
最稳妥的做法是：HTML <base> 只用于明确需要统一资源根路径的场景（比如整个站点部署在子路径且所有静态资源也放子路径下），否则宁可不用 —— 现代构建工具（Vite、Webpack）通常靠 public 目录或 base 配置生成正确路径，不需要手动写 <base>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
