base标签影响href="#section"导致整页重载是规范行为：拼接为/app/#section触发刷新；base href非法写法（如缺斜杠）致资源404；base与前端路由base不一致引发跳转错位或chunk加载失败；base target="_blank"会静默使所有无target链接新开窗口；base仅作用于html中硬编码相对路径，对js动态路径无效。
base 标签让 href="#section" 触发整页重载
这不是 bug，是浏览器严格按 URL 解析规范执行的结果：href="#section" 被视为相对 URL，一旦存在 <base href="/app/">，就会被拼成 /app/#section。这个路径变更会触发 history pushState 或服务端重定向，导致页面刷新、滚动重置、SPA 路由不响应。
常见现象包括：点击锚点后地址栏跳变、Network 面板出现对 /app/ 的 200 请求（返回完整 HTML）、目标元素没滚动到视口。
- 不要用
href="#section"+ 期望自动滚动 —— base 存在时它不可靠 - 改用
event.preventDefault()拦截默认行为，再调用document.getElementById("section").scrollIntoView() - Vue/React 中优先用
@click或onClick显式控制，而非依赖原生 a 标签跳转 - 若需保留语义和可访问性，可用
href={window.location.pathname + "#section"}（客户端）或服务端注入href="${location.pathname}#section"
base href 值写错导致所有相对资源 404
<base href="assets/"> 或 <base href="../static/"> 这类写法会被浏览器静默丢弃 —— 不报错、不警告，但后续所有 <img src="logo.png">、<script src="app.js"></script> 全部回退到当前页面 URL 解析，上线后批量 404。
合法的 href 值只有两种：
-
/myapp/（根相对路径，开头和结尾都必须是/） -
https://cdn.example.com/v3/（绝对 URL，结尾斜杠不能少） -
<base href="/myapp">❌ 缺末尾/，Firefox 可能拼出/myappcss/app.css -
<base href="%PUBLIC_PATH%/">❌ 构建未替换时就是字面量，直接失效
base 与前端路由配置不一致引发跳转错位
<base href="/admin/"> 和 Vue Router 的 createWebHistory("/admin/") 必须完全一致。两者是独立机制，互不读取对方值 —— document.baseURI 不影响 router.push() 行为。
典型错配后果：
- 只配 HTML
<base>，没设路由base→router.push("/home")跳到https://example.com/home（白屏） - 只设路由
base，漏写 HTML<base>→chunk-xxx.js加载 404（资源路径错） - Vite 已设
build.base: "/admin/"，HTML 再手动加<base href="/admin/">→ 路径被拼两次，如/admin//admin/assets/index.js
base target="_blank" 导致所有链接悄悄新开窗口
<base target="_blank"> 是隐形炸弹：它不只影响你写的 <a href="..."></a>，还会让第三方组件里所有没显式写 target 的链接（包括表单提交生成的链接）默认新窗口打开。
排查困难：控制台无报错，Network 无异常请求，只能靠用户反馈“点啥都开新页”。
- 删掉
<base target="...">，需要新窗口的地方显式写target="_blank" rel="noopener" - 若真需全局控制，用 JS 动态绑定：
document.querySelectorAll('a[href]:not([target])')，排除javascript:和mailto: - 注意不要用
a[href^="/"]这类选择器，会漏掉./page或../img等相对路径链接
最容易被忽略的是：base 标签只在 HTML 解析阶段生效，且仅影响硬编码的纯相对路径（如 src="app.js"），对 fetch("./api")、import("./utils")、@import 完全无效 —— 别指望它统一管理所有路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
