<base>标签重置HTML解析器对后续相对URL的基准起点，必须为绝对URL或根相对路径（结尾带斜杠），置于<head>最前且唯一；仅影响<img src>、<script src>等HTML纯相对路径，不影响JS/CSS运行时路径。
<base> 标签不是“帮你省路径”的快捷键，它是一次性重置 HTML 解析器对所有后续相对 URL 的基准起点。设错就 404，而且浏览器通常不报错、不警告，只静默失败。
base href 必须是绝对 URL 或根相对路径，否则整条标签被静默忽略
浏览器只接受 href 值以 https://、http://、// 或 / 开头。其他写法——比如 static/、../assets、https://example.com（结尾没 /）——整条 <base> 都会被丢弃。
常见翻车点：
-
<base href="assets/">→ 无效，缺协议和域名 -
<base href="../img">→ 无效，含.. -
<base href="https://cdn.example.com">→ Firefox/Opera 可能截断成https://cdn.example.comcss/app.css
正确写法只有两类：
立即学习“前端免费学习笔记（深入）”；
-
<base href="https://cdn.example.com/v2.3/">（推荐，明确、跨环境稳定） -
<base href="/myapp/">（根相对，结尾斜杠不能少）
base 只影响 HTML 解析阶段的纯相对路径，对 JS/CSS 运行时路径完全无效
这是最容易误判的盲区。<base href="/cdn/"> 不会让 fetch('./api/data.json') 或 import('./utils.js') 自动带上前缀。它只作用于 HTML 解析时硬编码在属性里的值。
✅ 明确受影响：
<img src="logo.png"><script src="bundle.js"><link href="style.css"><form action="submit.php">- CSS 文件内的
background: url(avatar.jpg)（唯一穿透到 CSS 的情况）
❌ 完全不受影响：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="page.html">（它的src相对于 iframe 当前 URL）
base 必须放在 <head> 最前面，且只能有一个
<base> 影响的是 HTML 解析顺序：它只对它之后出现的相对 URL 生效。放错位置或重复声明，等于没写。
错误示例：
- 放在
<body>里 → 浏览器直接忽略 -
<head><link href="main.css"><base href="/myapp/"></head>→main.css已解析完毕，不受控 - 模板拼接时 SSR 多次注入 → 只有第一个生效，控制台提示
Multiple base elements detected. Only the first one is used.
最稳妥的做法：在 HTML 源码中手动确保它出现在 <head> 最顶部，且仅一次。
SPA 部署时，base 标签和前端路由必须严格对齐
<base href="/subpath/"> 和 Vue Router 的 base: '/subpath/' 是两套独立机制，不自动同步。只设一个，另一个大概率出问题。
典型后果：
- HTML 没配
<base>，但 Vue Router 配了base→ chunk 文件 404 - Service Worker 缓存策略用
self.location.origin + '/subpath/'，而 HTML 没配<base>→ 预缓存路径错位 - 微前端子应用同时设了 Webpack
publicPath和<base>→ 资源路径被拼两次，变成/subpath/subpath/js/app.js
真正复杂的地方不在怎么写 <base>，而在于它和构建工具、路由配置、CDN 路径、本地开发 server 的多层耦合。一旦某一层没对齐，404 就悄无声息地发生。
