base标签必须是head内的第一个元素，且全文仅能出现一次，否则后续资源路径解析将出错；若位置错误或重复定义，浏览器仅采用首个base，其余静默丢弃。
base标签必须是里的第一个元素
浏览器解析 HTML 是自上而下、单次顺序进行的，<base> 的作用时机仅限于它出现之后的解析过程。如果它前面有任何其他标签（哪怕只是 <title> 或 <meta>），那么那些标签里写的 src、href 就已经按原始页面 URL 解析完了，<base> 对它们完全无效。
常见翻车现场：
-
<head><title>My App</title><base href="/app/"></head>→<title>本身不依赖 base，但紧随其后的<link href="style.css">若写在<base>后面才生效；若写在前面，就失效 -
<head><link href="main.css"><base href="/app/"></head>→main.css已按当前页 URL 请求，404 风险拉满 - SSR 模板中 header 片段和页面组件各自 render 一个
<base>→ 只有第一个被采纳，第二个被静默丢弃，控制台可能提示Multiple base elements detected. Only the first one is used.
base标签不能放在里
规范明确要求 <base> 必须出现在 <head> 内。一旦写进 <body>，所有主流浏览器都会直接忽略它——不报错、不警告、不生效，资源路径照旧按当前页面 URL 解析。
典型误操作：
立即学习“前端免费学习笔记（深入）”；
- Vue / React 组件内用
useEffect或mounted动态插入：document.head.appendChild(baseEl)→ 解析阶段早已结束，纯属无效操作 - 服务端拼接时逻辑出错，把
<base>插到了<body>开头 → 浏览器当它不存在 - 手写 HTML 时粗心，漏写了
<head>标签，直接把<base>放在文档最前 → 实际等价于放在<body>外部，同样被忽略
多个base标签只认第一个
HTML 规范规定，<head> 中允许存在多个 <base>，但浏览器只使用第一个，其余全部静默丢弃。这容易让人误以为“多写一个更保险”，结果反而掩盖了配置冲突。
排查要点：
- 用
Ctrl+U查看原始 HTML 源码，确认<base>是否真正在<head>第一行 - 检查构建产物（如 Vite 打包后 index.html）是否因插件或模板注入重复生成了
<base> - 微前端场景下，主应用和子应用各自注入
<base>→ 子应用的声明大概率被忽略，资源路径错乱
位置错误的后果比写错 href 更隐蔽
写错 href 值（比如写成 assets/）会导致整条 <base> 被静默丢弃，但至少你还能通过 Network 面板看到请求路径异常；而位置错误时，<base> 看似“存在”，实际只对部分后续标签生效，导致资源加载和页面跳转行为割裂——比如 <script src="app.js"> 加载成功，但 <a href="about.html"> 却跳到错误路径。
真正要盯死的只有三点：<base> 是 <head> 的第一个子节点、全文只出现一次、不在任何 JS 动态操作中生成。
