base标签仅改变相对url解析基准，不修改跳转逻辑；它不影响路由模式（如hash/history）、不触发跳转、不控制location api行为，仅修正资源路径解析，误将其用于“切换跳转模式”是常见误解。
base 标签改的是相对 URL 解析基准，不是跳转逻辑本身
直接修改 <base> 标签无法“实现跳转模式切换”，它只影响页面内所有相对 URL（如 <a href="page.html"></a>、<img src="logo.png">、fetch("./api/data")）的解析起点。所谓“整站跳转模式切换”如果指从路径跳转（/dashboard）切换为 hash 跳转（#!/dashboard）或代理跳转（/app/dashboard），<base> 本身不触发跳转，也不改变路由库行为，仅修正资源加载路径。误以为改了 <base href> 就能切换前端路由模式，是常见误解。
什么时候必须配对修改 base 和前端路由配置
单页应用（SPA）部署在子路径时，比如实际访问地址是 https://example.com/myapp/，但代码里写的是 href="assets/app.js" 或 router.push("/home")，这时若不设 <base href="/myapp/">，浏览器会把相对路径解析成根目录 /assets/app.js（404），而路由库（如 Vue Router、React Router）默认也按根路径匹配，导致 /home 匹配失败。此时必须同步做两件事：
-
<base href="/myapp/">放在中，确保所有相对 URL 正确解析 - 前端路由初始化时传入
base: "/myapp/"（Vue Router）或basename="/myapp/"（React Router v6） - 构建工具（如 Vite、Webpack）中配置
base: "/myapp/"，保证静态资源路径生成正确
三者缺一不可；只改 <base> 会导致资源加载正常但路由白屏或 404。
动态切换 base 标签几乎无效且危险
<base> 标签一旦解析完成（DOM 加载时），后续通过 JS 修改 document.querySelector("base").href = "..."; 不会重新解析已存在的相对 URL，也不会影响已绑定的事件或已发起的请求。浏览器规范明确：base URL 在文档解析阶段确定，运行时修改无效果。实测中，以下操作均无效：
document.head.querySelector("base").href = "/newbase/"- 移除再插入新
<base>标签 - 在
window.onload后修改
强行操作还可能破坏已有图片、样式、脚本的加载状态，尤其在使用 import() 动态导入时引发路径错误。需要“切换模式”，应走路由重定向或服务端配置（如 Nginx 的 location /old/ { rewrite ^/old/(.*)$ /new/$1 break; }），而非动 <base>。
真正影响跳转行为的是 location API 和路由库配置
页面跳转由三类机制控制：location.href、<a href></a> 点击、以及前端路由的 push/replace 方法。它们是否触发完整刷新、是否走 history 模式、是否带 hash，取决于：
- 链接本身的写法：
href="/a"（可能刷新）、href="#/a"（hash 模式）、href="./a"（相对当前 URL） - 路由库初始化时的
mode（Vue Router v3）或history类型（v4+） - 是否调用
event.preventDefault()+ 手动router.push() - 服务端是否配置了 fallback（history 模式下 404 返回 index.html）
<base> 只在上述第一项中起作用——让 href="./a" 正确解析为 /myapp/a 而非 /a。它不参与判断是否该用 pushState 还是 hashChange，也不决定服务端返回什么。把这个职责错归给 <base>，容易在部署和调试阶段浪费大量时间排查路径问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
