base href写错会导致所有相对资源404且浏览器不报错；必须以http://、https://、//或/开头且结尾带/才生效，否则整条标签被静默丢弃，仅影响内其后出现的纯相对路径。
base href写错值会让所有相对资源404却不报错
浏览器对 <base href> 的校验极其严格：只要值不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃。你不会在控制台看到任何警告或错误，但后续所有 <img src="logo.png">、<script src="app.js"></script> 都会按当前页面 URL 解析，结果是批量 404 —— 页面没内容可渲染，自然空白。
常见无效写法包括：
-
<base href="assets/">→ 缺协议和根斜杠，被丢弃 -
<base href="../static/">→ 含..，规范禁止 -
<base href="/myapp">→ 结尾缺/，Firefox/Opera 会把css/app.css拼成/myappcss/app.css -
<base href="%24%7BPUBLIC_PATH%7D">→ 构建未替换，浏览器收到字面量字符串，照样失效
base标签位置错或重复声明，等于没写
<base> 必须放在 最前面，且只能有一个。它只影响其后出现的相对路径解析起点，时机是 HTML 解析自上而下的过程。
典型失效场景：
- 放在
里 → 浏览器直接忽略 -
<link href="main.css"> <base href="/app/">→main.css已按原始 URL 解析完毕，<base>对它完全无效 - SSR 模板拼了两个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，但你可能根本没看 - 用 JS 动态创建并
appendChild()→ 解析阶段早已结束，无效
base 和前端路由 / 构建配置不一致，导致“一半走 base、一半走根”
<base href="/subpath/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径 —— 它们完全不读 document.baseURI，必须手动传入 base 配置项。
若只配 HTML 的 <base>，没设路由的 base：
-
<img src="logo.png">加载/subpath/logo.png（正常） -
router.push('/home')却跳到/home（白屏）
若同时配了 Webpack 的 publicPath 和手写的 <base href="/subpath/">：
- 资源路径被拼两次 →
/subpath//subpath/js/app.js→ 404
空白页未必是 base 导致，但它是最隐蔽的“静默杀手”
真正难排查的是：页面结构完整、Console 无报错、Elements 里能看到 DOM，但所有图片、CSS、JS 全部加载失败 —— Network 面板里一堆红色 404，而你还在反复检查 JS 逻辑。
这时候必须立刻查三件事：
- Network 面板第一个请求的
Type是不是document？Status 是不是200？ - Elements 面板里
是否存在<base>？它的href值是否以/结尾？是否以http://等合法前缀开头？ - 右键“查看网页源代码”，搜索
<base>，确认它是否真的被服务端吐出来，而不是模板变量没替换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
