站群中必须用绝对URL的base href，因根相对路径（如/assets/）会使所有子站强制指向主站根路径导致404，纯相对路径则失控；只有绝对URL（如https://zh.example.com/assets/）能确保各子站资源正确解析，且需构建时动态注入、与前端路由严格对齐。
base href 在站群中为什么必须用绝对 URL
站群场景下，多个子站共用同一套 HTML 模板或构建产物（如 Hugo、VuePress、Vite SSR 输出），但各自部署在不同域名或子路径（https://zh.example.com/、https://en.example.com/、https://example.com/ja/）。此时若用根相对路径 /assets/，所有子站都会被强制指向主站根路径，资源 404；若用纯相对路径（如 assets/），则每个页面都按自身 URL 解析，路径彻底失控。
真正可行的只有绝对 URL：https://zh.example.com/assets/、https://en.example.com/assets/。它绕过浏览器对路径拼接的歧义，确保 <img src="logo.png"> 始终解析为对应语言站点下的资源地址。
- 模板引擎需动态注入真实域名，不能留
%PUBLIC_URL%或{{ .Site.BaseURL }}字面量发到浏览器 - CDN 场景推荐协议相对写法：
//cdn.example.com/zh/v2/，自动继承当前页面协议 - 本地预览时可临时用
http://localhost:3000/zh/，避免和后端路由冲突
多子站共用一份 HTML 时 base 标签怎么生成
静态站点生成器（如 Hugo、Jekyll）或 SSR 框架（如 Nuxt、Next）在构建阶段，必须为每个子站单独渲染 HTML，并在 <head> 最顶部插入对应 <base href="...">。这不是运行时逻辑，而是构建时的模板变量替换。
常见错误是“一次构建、多处部署”：把 <base href="/zh/"> 打包进通用 HTML，再复制到 en/ 目录下——结果英文站也加载 /zh/js/app.js，直接失败。
立即学习“前端免费学习笔记（深入）”；
- Hugo 示例：
<base href="{{ .Site.BaseURL }}">，其中.Site.BaseURL需在每个子站配置中设为完整 URL - Vite + SSR：通过
build.rollupOptions.output.manualChunks分离公共 chunk，再用transformIndexHtml插件按请求 host 注入<base> - 禁止 JS 动态改
document.head.appendChild(...)：已解析的<script src="app.js">不会重算路径
站群中 base 和前端路由必须严格对齐
如果子站是 SPA（如 Vue Router 的 history 模式），只配 <base href="/zh/"> 而不设 router 的 base 参数，会出现行为割裂：<img src="logo.png"> 加载 /zh/logo.png 成功，但 router.push('/home') 却跳转到 https://example.com/home（根路径）。
这是两个独立系统：HTML 解析器读 <base>，Router 读自己的配置。它们之间没有自动同步机制。
- Vue Router：
createRouter({ base: '/zh/' }) - React Router v6+：
<Router basename="/zh"> - Vite：
base: '/zh/'（影响构建输出路径，与 HTML 中<base>值应一致） - 若值不一致，Service Worker 缓存路径、微前端子应用 chunk 加载都会出错
站群上线前必须验证的三件事
上线前光看页面能打开没用，关键要确认浏览器 Network 面板里所有资源请求的真实 URL 是否符合预期。很多问题静默发生，控制台不报错，但资源全部 404。
- 打开 DevTools → Network → 刷新页面 → 查看
index.js、style.css、logo.png的 **Initiator** 和 **Request URL**：是否已正确拼接<base href>？ - 检查
document.baseURI控制台输出是否为你期望的绝对 URL（不是file:///或空字符串） - 在非根路径子站（如
/ja/）点一个未带target的<a href="about.html">，确认跳转地址是/ja/about.html而非/about.html
最容易被忽略的是 Firefox 和 Opera 对 <base href="/ja">（结尾缺斜杠）的截断行为：它会把 css/app.css 拼成 /jacss/app.css，而不是报错或警告。
