标签在本地调试时易致资源404、锚点重载、路由白屏，根本原因是它强制将所有纯相对路径（如logo.png、#section2）解析起点改为指定href值，而该值在file://协议或开发服务器下常与实际路径不匹配：/在本地文件系统中指向根目录，导致静默失效；./或assets/因不以http://、https://、//或/开头而被丢弃；http://localhost:3000/虽合法但上线需手动替换；开发服务器不自动代理路径，致使src="app.js"请求/app.js而非/myapp/app.js；file://下拼出file:///sub/#faq非法URL，触发刷新；Vite/webpack若同时配置build.base与HTML中，会导致双斜杠路径如/sub//sub/js/app.js而404；推荐仅配构建工具base，HTML中避免硬编码，并用console.log(document.baseURI)验证生效。
<base> 标签在本地调试时容易引发资源 404、锚点跳转重载、甚至路由白屏，根本原因不是它“设计有问题”，而是它强制把所有纯相对路径（如 logo.png、app.js、#section2）的解析起点，从当前 HTML 文件所在位置，改成你指定的 href 值——而这个值在本地开发环境里，几乎总是和实际文件系统路径或服务器路由不匹配。
本地调试时<base href="...">写成/或./就失效
浏览器只接受以 http://、https://、// 或 / 开头的 href 值。但注意：/ 是根相对路径，它指向的是协议+域名后的第一个 /，比如 http://localhost:3000/ 的根是 /，而 file:///Users/you/project/index.html 的根是文件系统根（/），两者完全不等价。
-
<base href="/>%20%E2%86%92%20%E5%9C%A8%20file://%20%E5%8D%8F%E8%AE%AE%E4%B8%8B%E8%A2%AB%E9%9D%99%E9%BB%98%E5%BF%BD%E7%95%A5%EF%BC%8C%E6%89%80%E6%9C%89%20<img%20src=" logo.png>仍按文件系统路径解析，但浏览器禁止跨目录读取，结果是 404 -
<base href="./>%20%E6%88%96%20<base%20href=" assets>→ 不以合法前缀开头，整条标签丢弃，等于没写，但开发者误以为“已生效”，后续排查绕远路 -
<base href="http://localhost:3000/">→ 合法且明确，但仅适用于本地开发；上线后必须手动替换，易遗漏
本地开发服务器（如 Vite/webpack-dev-server）不处理<base>的路径映射
开发服务器按请求路径返回文件，但它不会根据 <base href="/myapp/"> 自动把 GET /logo.png 重写为 /myapp/logo.png。它只响应真实存在的路径。
- 你写了
<base href="/myapp/">，又引用<script src="app.js"></script>→ 浏览器发起请求http://localhost:3000/app.js，但服务器只在/myapp/app.js有该文件 → 404 - Vite 的
build.base配置影响构建产物路径，但开发服务器（vite dev）默认不启用 base 路由重写，除非显式配server.proxy或base选项 - Webpack Dev Server 默认也不代理
/myapp/下的请求，需额外加devServer.historyApiFallback+ 路径重写规则
本地调试时a href="#xxx"点击会触发页面重载
这是最隐蔽的坑：本地打开 index.html（file:// 协议），加上 <base href="/sub/">，再点 <a href="#faq"></a>，浏览器会尝试跳转到 file:///sub/#faq —— 这个路径非法，部分浏览器直接刷新页面或报错，滚动定位彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 现象：点击锚点后页面闪一下、滚动回到顶部、Network 面板出现对
/sub/的空请求（状态 200，但内容是完整 HTML） - 原因：
file://协议下<base>行为未标准化，Chrome 可能拼出非法 URL，Firefox 直接拒绝 - 解法不是删
<base>，而是在 JS 中拦截：document.addEventListener('click', e => { if (e.target.matches('a[href^="#"]')) { e.preventDefault(); document.querySelector(e.target.hash)?.scrollIntoView(); } });
构建工具与<base>双配置导致本地和线上行为割裂
很多项目用 Vite 构建时设了 base: '/sub/'，又在 HTML 模板里手写 <base href="/sub/">。本地开发时，Vite 的开发服务器不读取 HTML 中的 <base>，只认配置项；但构建后两者叠加，资源路径变成 /sub//sub/js/app.js（双斜杠），404。
- Vite 推荐做法：只配
build.base，HTML 中不写<base>；若必须写（如 SSR 场景），确保构建时动态注入，而非静态硬编码 - Webpack 项目中，
publicPath和<base>值必须一致，否则import()动态加载 chunk 的路径和<script src></script>解析路径不一致 - 本地调试时，用
console.log(document.baseURI)确认是否生效，比盲猜更可靠
真正麻烦的从来不是 <base> 本身，而是它把路径决策从运行时（JS 可控）提前到了 HTML 解析阶段（不可逆、无提示、难调试）。本地环境缺乏服务端协调，这种提前锁定最容易暴露矛盾。
