<base> 的 href 重置 HTML 解析器对所有相对 URL 的基准起点，必须置于 <head> 内且唯一；仅影响纯相对路径（如 logo.png），不影响绝对 URL、根相对路径（如 /admin）、JS 动态请求或 CSS @import。
<base> 的 href 不是用来“加前缀”的，它是重置整个 HTML 解析器对相对 URL 的起点——设错一个字符，<img src="logo.png"> 就 404。
必须放对位置、且只能有一个
浏览器只认 <head> 里第一个 <base>，其他全被忽略。放到 <body> 里？直接失效，控制台可能连警告都不给。
- 正确顺序：
<head><base href="https://cdn.example.com/v3/"><title>...</title><link rel="stylesheet" href="main.css"></head>（<base>必须在所有依赖路径的标签之前） - 服务端模板拼接时容易重复注入（比如多个组件各自 render 一个
<base>），结果只有第一个生效，其余静默丢弃 - Vue/React 组件内动态插入
<base>是危险操作：DOM 已开始解析，后续资源不会重新 resolve
href 值必须是绝对 URL 或根相对路径
写 href="assets/" 或 href="../static/" 是无效的——浏览器会静默跳过整个 <base> 标签，退回到用当前页面 URL 当基准，部署后必出问题。
- ✅ 推荐：
href="https://cdn.example.com/v3/"（绝对 URL，明确可控） - ✅ 合法：
href="/myapp/"（根相对路径，结尾必须带斜杠，适用于 SPA 部署在子路径） - ✅ 可用：
href="//cdn.example.com/v3/"（协议相对，自动继承http:/https:） - ❌ 无效：
href="static/"、href="assets/css/"、href="%PUBLIC_URL%/"（未被服务端替换就发到浏览器，变成字面量字符串）
它影响什么、不影响什么，得拎清楚
<base> 只在 HTML 解析阶段起作用，不是全局路径代理。很多你以为它能管的，其实完全不管。
立即学习“前端免费学习笔记（深入）”；
- ✅ 影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、CSS 中的background: url(avatar.jpg) - ❌ 不影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS@import "reset.css" - ⚠️ 特别注意：
<a href="/admin">这种根相对链接，根本不受<base>控制——它直接拼到当前域名下，和href值无关
SPA 项目里慎用，优先走构建配置
Vue Router v4+、React Router v6+ 都要求显式传入 base 配置项（如 createRouter({ base: '/myapp/' })），它们不读 document.baseURI。硬塞 <base href="/myapp/"> 可能导致路由匹配和资源加载行为不一致。
- Webpack/Vite 构建时用
publicPath或base配置自动重写 HTML 中的<base>，比手写更可靠 - 微前端场景下，子应用若自己写
<base>，极易和主应用的 publicPath 冲突 - 本地开发用
file://协议时，href必须是完整file:///路径，否则部分浏览器解析异常
最常被忽略的一点：<base> 改变的是 HTML 解析器的行为，不是运行时环境。你写 new URL('api/user', document.baseURI) 是安全的，但 fetch('api/user') 依然按 location.origin 发请求——这两者在非根部署时可能指向完全不同地址。
