<base>标签写错不会报错但会导致相对路径资源批量404；其href必须以http://、https://、//或/开头且位于<head>首行，仅影响纯相对路径，与JS/CSS运行时逻辑无关。
<base> 标签写错不会报错，但会导致所有纯相对路径资源批量 404——这是最典型的“静默故障”，排查时必须跳过控制台警告，直奔 Network 面板和 HTML 源码。
检查 <base href> 值是否合法且被浏览器真正采纳
浏览器对 <base href> 的校验是“全有或全无”：只要值不以 http://、https://、// 或 / 开头，整条标签就被静默丢弃。它不会降级为“部分生效”，也不会在控制台提示。
-
/myapp/✅ 合法（根相对路径，开头和结尾都必须是/） -
https://cdn.example.com/v3/✅ 合法（绝对 URL，结尾带/） -
//cdn.example.com/v3/✅ 合法（协议相对 URL） -
assets/❌ 静默失效（不是以四类前缀之一开头） -
../static/❌ 静默失效（含..，规范禁止） -
/myapp❌ Firefox/Opera 下会截断路径（如把css/app.css拼成/myappcss/app.css）
打开浏览器开发者工具 → Elements → 查看 <head> 最顶部是否存在 <base>，并确认其 href 值符合上述任一格式。若值非法，它就等于没写。
确认 <base> 在 <head> 中的位置和数量
<base> 只对它之后出现的相对 URL 生效，且必须是 <head> 内第一个元数据标签；多个声明时仅第一个生效，其余被浏览器忽略（Chrome 控制台会提示 Multiple base elements detected. Only the first one is used.）。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<head><title>App</title><base href="/app/"></head>→<title>已先解析，<base>对它无效，且若之前还有<link>，那些资源也已按原始 URL 加载完毕 - 错误示例：
<body><base href="/app/"></body>→ 浏览器直接忽略，不报错也不警告 - 错误示例：SSR 模板中 header 和 page 两处都渲染了
<base>→ 第二个被丢弃，但可能引发构建与运行时路径不一致
用 Ctrl+U 查看 HTML 源码，确认 <base> 是否位于 <head> 第一行，且全文仅出现一次。
区分哪些路径真受 <base> 影响，哪些完全不受控
<base> 仅在 HTML 解析阶段生效，只改写“纯相对路径”（即不以 /、: 或协议开头的字符串），不是全局 URL 重写器。JS/CSS 运行时行为、模块系统、CSS @import 等均绕过它。
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<form action="submit.php">、CSS 文件中background: url(avatar.jpg)（注意：这是 HTML 加载 CSS 时解析的，不是 CSS 引擎自己 resolve） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/frame.html">（以/开头）、<img srcset="logo-2x.png 2x"> - ⚠️ 半受影响：
new URL('data.json', document.baseURI)可读取值，但window.location、history.pushState()的相对路径仍以当前页面 URL 为准
别指望 <base> 能统一控制 JS 中的 fetch 或 CSS 中的 @import——它们各自有独立的解析逻辑。
SPA 部署子路径时，<base> 与前端路由/构建配置的对齐陷阱
部署在 https://example.com/a/b/c/ 时，<base href="/a/b/c/"> 和框架路由配置必须显式对齐，否则资源加载和跳转行为割裂。Vue Router / React Router v6+ 不读 document.baseURI，必须手动传入 base 配置项。
- 只配
<base href="/a/b/c/">，但 Vue Router 没设base: '/a/b/c/'→router.push('/home')会跳到https://example.com/home，白屏 - Webpack 的
publicPath和手写的<base href="/a/b/c/">同时存在且值相同 → 资源路径被拼两次，如/a/b/c//a/b/c/js/app.js - Vite 构建时已设
build.base: '/a/b/c/'→ HTML 中再手动加<base>属于冗余，易引发双斜杠问题 -
a href="#"在<base href="/sub/">下会被解析为/sub/#，触发一次无意义的页面重载（地址栏变灰、滚动回顶）
真正卡住的地方往往不是单点错误，而是多层机制（HTML 解析、构建输出、运行时路由、Service Worker 缓存）之间路径逻辑未对齐——修一个，漏三个，所以必须同步检查 Network 面板里每个请求的真实 URL 和状态码。
