base标签必须置于<head>最顶部且唯一，仅对之后出现的相对URL生效；放错位置、放入<body>或重复声明均导致失效，href须为绝对URL或根相对路径（结尾带/），否则静默忽略。
base标签必须放在最前面，否则解析失效
浏览器解析 HTML 是从上到下进行的，<base> 的作用是重置后续所有相对 URL 的基准起点。它不是“全局配置”，而是“生效点之后才起效”的解析指令。一旦 <base> 出现在某个 <link href="style.css"> 或 <img src="logo.png"> 之后，这些标签就已经按原始页面 URL 解析完了，<base> 对它们完全无效。
常见错误包括：
- 把
<base>放在<meta charset>后面（虽然<meta>不依赖路径，但顺序错意味着它已错过“最早元数据类标签”的定位） - 模板中因条件判断插入了
<link>，结果<base>被挤到了第二或第三位 - 服务端渲染时拼接顺序混乱，比如先写
<link rel="preload">再写<base>
不能放在里，浏览器直接忽略
<base> 只在 <head> 内部合法。如果误塞进 <body>，现代浏览器会静默丢弃整条标签——不报错、不警告、控制台无提示，但所有相对路径仍走原始解析逻辑，404 风险陡增。
更隐蔽的问题是：部分旧版 IE 在 <body> 中遇到 <base> 会直接中断 DOM 解析，导致页面白屏或脚本执行异常。
立即学习“前端免费学习笔记（深入）”；
验证方式很简单：
打开 DevTools → Elements 面板 → 检查 <head> 开头是否只有 <meta charset>、<title> 等纯元数据标签，且 <base> 是其中第一个（或紧随 <meta charset> 之后）。
重复声明会导致覆盖或静默崩溃
一份 HTML 文档中只能有一个 <base>。如果模板中多个组件都尝试注入，或服务端/客户端多次渲染导致重复，后果分两种：
- 现代浏览器：后一个
<base>覆盖前一个，但你无法感知哪次生效 - IE8–IE10：直接解析失败，页面资源加载乱序甚至空白
实操建议：
- 统一由主模板（如 layout.html）注入，子组件禁止写
<base> - 构建时用 HTML 插件（如 html-webpack-plugin 的
inject: false+ 手动写入）避免重复 - CI 流程中加校验脚本：grep -q '
动态插入 base 标签毫无意义
用 JavaScript 在 DOM 加载后插入 <base href="/app/"> 完全无效。浏览器只在初始 HTML 解析阶段读取并应用 <base>，DOM 操作无法回溯修正已解析的 src、href 值。
典型翻车场景：
- SPA 切换路由后试图用 JS 补
<base>来修复子路径资源加载 - 微前端子应用在 mount 时动态写入
<base>，但其<script>标签早已加载失败
替代方案只有两个：
- 服务端输出时就确定好
<base>（推荐） - 改用构建工具 publicPath / base 配置（如 Vite 的
build.base），让打包产物路径与部署路径对齐
真正容易被忽略的是：哪怕你把位置、数量、写法全做对了，只要 href 值不是绝对 URL 或根相对路径（以 / 开头且结尾带 /），浏览器照样静默忽略——连 DOM 里都看不到它生效的痕迹。
