浏览器静默丢弃非法<base>标签：href值必须以http://、https://、//或/开头且结尾带/，否则整条标签被丢弃，导致所有相对路径按当前页URL解析而批量404；需检查Elements中<base>位置、数量及合法性，并比对路由与构建配置。
检查<base>是否被浏览器静默丢弃
浏览器对<base href>的合法性校验是“全有或全无”：只要值不以http://、https://、//或/开头，整条标签就被丢弃，且控制台零提示。你看到的 404 实际是资源按当前页面 URL 解析失败的结果。
常见静默失效写法包括：assets/、../static/、subapp/、%PUBLIC_URL%/（未被构建工具替换时）、/myapp（结尾缺/）。
正确做法：
- 打开浏览器开发者工具 → Elements 标签页 → 查看
<head>最顶部是否存在<base>，并确认其href值是否符合任一合法格式 - 用
Ctrl+U查源码，避免被 JS 动态插入干扰（动态插入的<base>完全无效） - 若值非法，它等于没写；别指望 Network 面板里能帮你定位——请求路径看起来“正常”，但基准已错
确认<base>位置和数量是否合规
<base> 只对它之后出现的相对 URL 生效，且必须位于 <head> 内、所有其他标签（包括 <title>）之前；多个声明时仅第一个生效，其余被静默丢弃。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
-
<head><link href="main.css"><base href="/app/"></head>→main.css已解析完毕，<base>对它无效 -
<base>写在<body>里 → 浏览器直接忽略，不报错也不警告 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ 控制台可能提示Multiple base elements detected. Only the first one is used.，但你未必会注意到
比对前端路由与构建配置是否与<base>对齐
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们根本不读 document.baseURI，必须显式传入 base 参数。配错就会导致“一半走 base、一半走根”。
例如：
- HTML 中
<base href="/myapp/">，但 Vue Router 未设base: '/myapp/'→router.push('/home')跳到https://example.com/home，而非预期的/myapp/home - Vite 中设了
build.base: '/myapp/'，又手动加<base href="/myapp/">→ 资源路径被拼两次，如请求/myapp//myapp/assets/index.js，结果 404 - Webpack 的
publicPath设为'/'，但 HTML 有<base href="/myapp/">→ 运行时 chunk 加载地址是/myapp/xxx.js，而实际文件在/xxx.js，必然 404
验证方式：打开 Network 面板，点击跳转后看发起的请求 URL 是否符合你部署的静态资源路径。
排查<base target>引发的隐形跳转异常
<base target="_blank"> 是隐形炸弹：它不只影响你写的链接，还会让第三方组件里所有没显式写 target 的 <a>、<form> 默认新窗口打开——包括你根本没意识到的按钮或导航项。
症状极难排查：
- 控制台无报错，Network 也看不到异常请求
- 用户反馈“点啥都开新页”，但你代码里没写
target - 修复方法很简单：删掉
<base target="">，需要新窗口的地方显式写target="_blank" rel="noopener"
更隐蔽的是 href="#" 锚点失效：有了 <base href="/myapp/">，<a href="#section2"> 会被解析成 /myapp/#section2，触发完整导航而非滚动，页面闪一下就滚回顶——这不是 JS 没绑事件，是 base 在劫持你的锚点。
