base标签必须设为绝对URL或根相对路径（结尾带斜杠），且须置于head最顶部唯一存在；仅影响HTML解析阶段的相对URL，对fetch、import等运行时请求无效；SPA和微前端中需与构建配置、路由base严格一致。
base 标签不是“加个前缀就完事”的配置项，设错就全站资源 404，而且浏览器不报错、不警告，只静默失效。
base href 值必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 http://、https://、// 或 / 开头的 href 值；其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被直接丢弃。
-
https://cdn.example.com/v3/✅ 推荐：协议、域名、路径明确，CDN 场景最稳 -
/myapp/✅ 合法：根相对路径，结尾斜杠不能少（/myapp在 Firefox 会截断成/myappcss/） -
//cdn.example.com/v3/✅ 可用：自动继承当前页协议，适合混合环境 -
static/❌ 静默忽略 →logo.png仍按当前页面 URL 解析，上线即 404 -
https://example.com❌ 缺尾斜杠 → 某些浏览器拼接style.css时变成https://example.comstyle.css
base 必须放在 最顶部且只能有一个
HTML 解析是自上而下的，base 只对它之后出现的相对 URL 生效。位置或数量错，等于没写。
- 正确顺序：
<head><base href="/myapp/"><title>...</title><link href="style.css"></head> - 错误写法：
<head><title>...</title><base href="/myapp/"><link href="style.css"></head>→style.css已按原始页面 URL 解析完毕 - 放在
<body>里？浏览器直接忽略，控制台无提示 - 多个
<base>？只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
哪些属性真受影响，哪些完全不管
base 只在 HTML 解析阶段起作用，不是运行时代理。很多你以为它能管的，其实根本绕过它。
- ✅ 真正受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、CSS 中的background: url(avatar.jpg)、<meta http-equiv="refresh" content="0;url=success.html"> - ❌ 完全不受控：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html"> - ⚠️ 特别注意：
<img src="/admin/frame.html">这种根相对路径，根本不受base影响——它直接拼到当前域名下
SPA 项目里慎用，优先走构建配置或路由 base 参数
Vue Router v4+、React Router v6+ 的 base 配置和 HTML 的 <base href> 是两套独立机制，不自动同步。硬塞一个，另一个大概率出问题。
立即学习“前端免费学习笔记（深入）”；
- Vue Router 需显式传入
createRouter({ base: '/myapp/' })，它不读document.baseURI - Webpack 的
publicPath或 Vite 的base配置，应与 HTML<base href>保持一致，否则 chunk 加载 404 - 微前端场景下，子应用若同时设了 Webpack
publicPath和 HTML<base>，资源路径可能被拼两次（如/subpath/subpath/js/app.js） - Service Worker 缓存策略若依赖
self.location.origin + '/subpath/'，而 HTML 没配<base>，预缓存路径也会错位
<base href="/xxx/">，而是确保它在整个构建、部署、运行链路中不被覆盖、不被误解、不和 JS 路由或动态请求产生隐性冲突。尤其当多人协作、多环境部署、前后端分离时，base 的值极易在模板、构建配置、CDN 设置之间错位。 
