base标签不直接影响js运行时路由，但会劫持html相对url解析，导致锚点重载、路由跳转错位、资源404；其href必须为绝对url或结尾带/的根相对路径，否则静默失效。
base 标签本身不直接影响 JavaScript 运行时的路由跳转逻辑（比如 router.push()、history.pushState()），但它会劫持所有原生 HTML 元素的相对 URL 解析行为，从而在多个环节间接破坏 SPA 的路由体验。问题不在“跳转代码”，而在“浏览器怎么理解你写的 href”。
base 让 href="#section2" 变成页面重载
浏览器把所有不以 /、http://、https:// 或 // 开头的 href 值，都当作相对路径处理。
- 你写：
@#@#@#@#@#@#@#@#@#@0 - 页面有：
<base href="/myapp/"> - 浏览器解析结果：
/myapp/#section2
这个结果本身合法，但关键在于：它是一个完整的新 URL 路径。浏览器认为这是一次导航请求，于是：
- 触发
pushState或服务端 fallback（如果没配 history API 回退页） - 如果服务端没返回对应 HTML（通常不会），就加载
/myapp/这个路径的完整页面 → 整页刷新 - 即使没刷新，Vue Router / React Router 也只监听
hashchange或popstate，而/myapp/#section2和当前页面 URL（如/myapp/page）不匹配，路由不响应，也不滚动
你看到的现象是“点了没反应”或“闪一下滚回顶”，不是 JS 报错，而是浏览器静默执行了错误导航。
base 和前端路由配置完全不互通
Vue Router 的 createRouter({ base: '/myapp/' })、React Router 的 <router basename="/myapp"></router>，它们根本不读取 document.baseURI。
-
<base href="/myapp/">存在 - 但
createRouter({ base: '/admin/' })配错了 →router.push('/home')生成的是@#@#@#@#@#@#@#@#@#@1，而非预期的/myapp/home - 更糟的是：资源（
script、img）按/myapp/加载，而路由跳转指向/admin/→ 页面白屏或 404
这不是 bug，是两套独立机制：HTML 解析层用 base，运行时路由用自己配置。它们之间没有自动对齐，必须字面量完全一致（包括结尾斜杠）。
构建工具和手写 base 混用导致双斜杠
Vite 的 build.base: '/myapp/' 或 Webpack 的 publicPath: '/myapp/'，会在打包时重写所有资源路径（如 js/app.js → /myapp/js/app.js）。
如果你再手动加一行：<base href="/myapp/">，浏览器会再次拼接：
- 原本应请求：
/myapp/js/app.js - 实际发出：
/myapp//myapp/js/app.js（中间两个//） - 服务端找不到该路径 → 404
这种错误在 Network 面板里一眼可见：请求 URL 中出现重复路径段。它不报错，但资源全挂。
真正容易被忽略的点是：base 生效与否，浏览器从不提示。写成 href="subapp/"、href="/myapp"（缺结尾斜杠）、href="../static/"，整条标签被静默丢弃——你检查 HTML 源码能看到它，但它不起作用。所有相对资源退回到按当前页面 URL 解析，上线后批量 404，排查时却找不到任何控制台警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
