标签写错会静默失效导致批量404：href必须以http://、https://、//或/开头且根相对路径结尾带/，否则整条标签被丢弃；它仅影响html解析阶段的纯相对路径，且须位于最前、唯一存在。
<base> 标签写错不会报错，但会导致批量 404，且 Network 面板里请求路径“看起来正常”——这是最危险的静默故障。核心判断：只要 href 值不以 http://、https://、// 或 / 开头，整条标签就被浏览器静默丢弃。
检查 <base href> 值是否合法且生效
浏览器对 <base> 的校验是“全有或全无”。非法值等于没写，但你根本收不到提示。
-
assets/、../static/、subapp/、%PUBLIC_URL%/（未被构建替换时）→ 全部非法，静默失效 -
/myapp→ 结尾缺/，Firefox/Opera 会截断路径，例如把css/app.css拼成/myappcss/app.css -
/myapp/✅ 合法根相对路径（开头和结尾都必须是/） -
https://cdn.example.com/v3/✅ 绝对 URL（协议+域名+路径，结尾带/） -
//cdn.example.com/v3/✅ 协议相对 URL（自动继承当前页 http/https）
打开 DevTools → Elements → 检查 最顶部是否存在 <base>，并确认其 href 符合上述任一格式。若值非法，它就等于不存在。
确认 <base> 位置和数量是否正确
<base> 只对它之后出现的相对 URL 生效，且必须在 内、所有其他标签（包括 <title></title>）之前；多个声明时仅第一个生效，其余被静默丢弃。
-
<link href="main.css"> <base href="/app/">→main.css已解析完毕，<base>对它无效 -
<base>写在里 → 浏览器直接忽略，不报错也不警告 - 用
document.head.appendChild(baseEl)动态插入 → 解析阶段早已结束，完全无效 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，但你可能根本没看控制台
用 Ctrl+U 查看 HTML 源码，确认 <base> 是否位于 第一行，且全文仅出现一次。
区分哪些路径真受 <base> 影响，哪些完全不受控
这是最容易误判的一点：<base> 只作用于 HTML 解析阶段的硬编码纯相对路径，对 JS/CSS 运行时路径毫无影响。
- ✅ 真受影响：
<img src="logo.png">、<script src="bundle.js"></script>、<link href="theme.css">、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 特别注意：
href="/admin"这种以/开头的路径是绝对路径，根本不受<base>控制——它直接拼到当前域名下
也就是说，<base href="/myapp/"> 不会让 fetch('./api') 自动变成 fetch('/myapp/api')，也不会让 import('./router') 加前缀。它只管 HTML 属性里的 “裸字符串”。
前端路由与构建工具配置必须和 <base> 严格对齐
<base href="/a/b/c/"> 和 Vue Router 的 base: '/a/b/c/'、Vite 的 build.base、Webpack 的 publicPath 是三套独立机制，互不读取、互不校验。配错一个，就会出现“一半走 base、一半走根”的割裂行为。
- 只配
<base href="/admin/">，没设 Vue Router 的base→router.push('/home')跳到https://example.com/home，而非/admin/home - Vite 已设
build.base: '/admin/'，HTML 中再手动加<base href="/admin/">→ 资源路径被拼两次，如请求/admin//admin/js/app.js，结果 404 - Webpack
publicPath: '/'和<base href="/myapp/">同时存在 → chunk 加载地址变成/myapp/xxx.js，但实际文件在/xxx.js，必 404
锚点链接 href="#section2" 在有 <base> 时会被解析为 /myapp/#section2，触发整页重载而非滚动——这是最隐蔽的静默刷新。修复不是删 <base>，而是改写链接或用 event.preventDefault() 拦截后手动 scroll。
真正麻烦的不是写错，而是写错后什么提示都没有。排查时别依赖控制台，直接看 Network 请求的实际发起 URL 是否符合部署路径；也别假设框架会自动读取 document.baseURI —— 它们不会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
