base href 必须是绝对 url 或根相对路径（以/开头且结尾带斜杠），否则浏览器静默忽略；必须置于head最顶部且唯一；仅影响html解析阶段的相对url（如src、href、css url()等），对fetch、import等js路径无效。
base href 必须是绝对 URL 或根相对路径，否则浏览器静默忽略
浏览器解析 <base> 时，只要 href 值不以 http://、https://、// 或 / 开头，整个标签就被丢弃——控制台无报错，但所有 src="logo.png" 都按当前页面 URL 解析，上线后必 404。
常见无效写法：href="assets/"（缺协议）、href="../static"（含 ..）、href="/myapp"（结尾没斜杠，Firefox 会截断成 /myappcss/）。
- ✅ 推荐：
href="https://cdn.example.com/v3/"（绝对 URL，部署可控） - ✅ 合法：
href="/myapp/"（根相对路径，结尾必须带斜杠） - ✅ 可用：
href="//cdn.example.com/v3/"（协议相对，自动继承当前协议） - ❌ 无效：
href="static/"、href="%PUBLIC_URL%/"（未被服务端替换就发到浏览器）
base 标签必须放在 最顶部，且只能有一个
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。
典型翻车场景：<base href="/static/">（被忽略）；SSR 模板拼接时 header 和 page 各 render 一个 <base>（只有第一个生效，控制台可能提示 Multiple base elements detected. Only the first one is used.）。
- 正确顺序：
<base href="/myapp/"> <title></title> <link href="style.css"> - 禁止用 JS 动态插入：
document.head.appendChild(baseEl)—— 已解析的<img src="x">不会重算，只影响之后新创建的元素 - 构建时若用模板引擎（如 Hugo），确保占位符（如
{{ .Site.BaseURL }}）被真实值替换，而非字面量字符串
哪些属性真受影响，哪些完全不管
<base> 只在 HTML 解析阶段起作用，不是全局代理。很多你以为它能管的，其实根本绕过它。
✅ 真正受影响（按 base.href 拼接）：<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、<a href="about.html"></a>、CSS 中的 background: url(avatar.jpg)、<meta http-equiv="refresh" content="0;url=success.html"> 中的 url= 值。
❌ 完全不受控（仍按各自文件路径或当前域名解析）：fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 文件内的 @import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x">。
⚠️ 半受影响：document.baseURI 返回 <base href> 的值，可用于构造 URL（如 new URL('data.json', document.baseURI)），但 window.location 和 document.URL 完全不变。
SPA 项目里别硬塞 base 标签，优先走构建配置和路由显式 base
Vue Router v4+、React Router v6+ 都要求显式传入 base 配置项（如 createRouter({ base: '/myapp/' })），它们不读 document.baseURI。硬塞 <base href="/myapp/"> 而不配路由，会导致资源加载正常但路由跳转错乱（比如 router.push('/home') 实际跳到 https://example.com/home）。
- Webpack/Vite 构建时，用
publicPath或base配置自动重写 HTML 中的<base>，比手写更可靠 - 微前端场景下，子应用若同时设了 Webpack
publicPath和 HTML<base>，资源路径可能被拼两次（如/subpath/subpath/js/app.js） - Service Worker 缓存策略若依赖
self.location.origin + '/subpath/'，而 HTML 没配<base>，预缓存路径就会错位
真正难搞的不是怎么写 <base>，而是判断哪些资源该被它管、哪些得靠代码逻辑补全路径——尤其当 fetch 和 import() 都绕过它时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
