<base> 标签仅在 HTML 解析阶段重置相对 URL 基准，只对 src/href 等纯相对路径生效，必须置于 <head> 顶部且唯一，值须为绝对 URL 或合法根相对路径（如 /app/），否则被静默忽略。
<base> 标签不是“配置静态资源地址”的通用开关，它只在 HTML 解析阶段重置相对 URL 的基准起点，且仅对特定属性生效。设错或滥用会导致大量 404，浏览器还不报错。
base href 必须是绝对 URL 或合法根相对路径
浏览器只认以 https://、http://、// 或 / 开头的 href 值；其他写法（如 static/、../assets、https://example.com 缺尾部斜杠）整条标签被静默忽略。
-
<base href="https://cdn.example.com/v2.3/">✅ 完整绝对 URL，推荐用于 CDN 场景 -
<base href="/myapp/">✅ 合法根相对路径，结尾必须带/，否则 Firefox 会截断（/subpath→/subpathcss/） -
<base href="static/">❌ 缺协议和域名，被忽略 -
<base href="https://example.com">❌ 尾部无斜杠，部分浏览器解析异常
base 标签必须放在 <head> 最顶部且唯一
HTML 解析是自上而下的。<base> 只影响它之后出现的相对 URL。前面的 <link>、<script> 已按原始页面 URL 解析完毕，再加 <base> 也救不回来。
- 正确顺序：
<head><base href="/app/"><title></title><link href="style.css"></head> - 错误写法：
<head><link href="style.css"><base href="/app/"></head>→style.css不受控 - 放
<body>里？浏览器直接忽略，控制台零提示 - 模板拼接导致两个
<base>？只有第一个生效，Chrome 控制台会警告Multiple base elements detected
哪些路径真受影响，哪些根本绕不过 base
<base> 不是全局代理，它只干预 HTML 解析阶段的纯相对路径（既无协议、也不以 / 开头），对 JS/CSS 运行时逻辑完全无效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="logo.png">、<script src="main.js">、<link href="theme.css">、CSS 中的background: url(avatar.jpg) - ❌ 完全不影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js') - ⚠️ 半影响：
document.baseURI返回<base href>值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
SPA 部署子路径时，base 标签和前端路由必须协同
Vue Router 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，只配一个大概率出问题。
- HTML
<base href="/subpath/">是为了让<script src="chunk.js">正确加载，否则资源 404 - Vue Router / React Router v6+ 必须显式设
base: '/subpath/'，否则router.push('/home')会跳到根路径 - Service Worker 若用
self.location.origin + '/subpath/'预缓存，而 HTML 没配<base>，缓存路径就错位 - 微前端场景下，子应用若同时设了 Webpack
publicPath和<base>，资源路径可能被拼两次（/subpath/subpath/js/app.js）
最易被忽略的一点：构建工具（Vite/webpack）往往已自动注入 <base href="/">，你再手写一个，后者会被静默丢弃——得先确认是否已有，再决定是否覆盖。
