base href必须是绝对URL或以/开头的根相对路径，否则浏览器静默忽略；须置于<head>最前且唯一；仅影响HTML中纯相对路径（如src="logo.png"），不影响fetch、import等JS路径及CSS@import。
base href 必须是绝对 URL 或以 / 开头的根相对路径
站群中每个子站可能部署在不同域名或子路径下，<base href> 一旦写成 assets/、../static/ 或 %PUBLIC_URL%/ 这类纯相对路径，浏览器会直接静默忽略整条标签——不报错、不警告，但所有 <img src="logo.png"> 都退回到按当前页面 URL 拼接，上线后批量 404。
常见翻车点：
-
href="/myapp"缺尾斜杠 → Firefox/Opera 可能截断为/myappcss/，导致style.css请求错位 -
href="https://cdn.example.com"缺尾斜杠 → 同样有被截断风险，应写成https://cdn.example.com/v2/ -
href="//cdn.example.com/v2"合法，但若子站混用 http/https，需确认 CDN 支持双协议 -
href="/"看似通用，但在 GitHub Pages 子目录（如https://user.github.io/repo/）下会指向根域，必然 404
base 标签必须放在 <head> 最顶部且只能有一个
站群页面常由模板引擎拼接（如 Hugo、Nuxt SSR），容易在 header 和 page 模块中各自注入一个 <base>。结果只有第一个生效，第二个被丢弃，控制台提示 Multiple base elements detected. Only the first one is used.，但开发者可能根本没看控制台。
正确顺序必须是：
立即学习“前端免费学习笔记（深入）”；
<head> <base href="/site-a/"> <title>Site A</title> <link href="main.css"> <script src="app.js"> </head>
错误做法包括：
- 把
<base>放在<title>或<meta>后面 → 已解析的<link>不受控 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，已加载的资源不会重算 - 在
<body>中写<base>→ 浏览器直接忽略，无任何提示
SPA 部署在子路径时，base href 与前端路由必须协同
站群中多个 Vue/React 应用共存于同一域名下的不同子路径（如 /site-a/、/site-b/），<base href="/site-a/"> 和 Vue Router 的 base: '/site-a/' 是两套独立机制，不自动同步。只配一个，另一个大概率出问题。
典型故障场景：
- HTML 中漏设
<base href="/site-a/">→<script src="chunk.js">404，应用根本起不来 - Vue Router 配了
base: '/site-a/'，但 HTML 没配<base>→ 路由跳转正常，但静态资源全挂 - Webpack 的
publicPath设为/site-a/，又加了<base href="/site-a/">→ 资源路径被拼两次，变成/site-a/site-a/js/app.js
微前端架构下更要警惕：主应用和子应用若都设 <base>，且未隔离作用域，资源加载逻辑极易混乱。
哪些路径真受影响，哪些完全不受 base 控制
站群建设中最容易误判的是以为 <base> 能统一所有路径。实际上它只在 HTML 解析阶段起作用，仅改写属性值中**纯相对路径**（即不以 /、: 或协议开头）的初始拼接逻辑。
✅ 明确受影响（HTML 属性硬编码）：
<img src="logo.png"><script src="app.js"><link href="theme.css"><form action="submit.php">- CSS 文件中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响（JS/CSS 运行时行为）：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="page.html">（它的src相对于 iframe 当前 URL）
真正麻烦的是那些“半受影响”的点：比如 document.baseURI 会返回 <base href> 的值，可用于构造 URL，但 window.location 和 document.URL 完全不变——这个差异在服务端渲染或预加载逻辑里很容易被忽略。
