服务端模板中必须提前注入合法 base href 值，确保在 HTML 生成阶段即替换为绝对 URL（如 https://cdn.example.com/v3/）或根相对路径（如 /myapp/），且结尾带斜杠；浏览器仅解析首遍 HTML 时读取 base，后续 DOM 操作无效，非法值（如含 ../、缺协议、无结尾斜杠）将被静默忽略，导致资源 404。
服务端模板中必须提前注入 base href 值
服务端渲染（SSR）时，<base> 标签不能靠客户端 JS 补上，必须在 HTML 字符串生成阶段就写对。浏览器只在解析第一遍 HTML 时读取 <base href="">，后续任何 DOM 操作都无效。
常见错误是把 <base href="{{ ASSET_BASE }}"> 直接扔进模板，但服务端没做变量替换——结果浏览器收到字面量 <base href="{{ ASSET_BASE }}">，href 值非法，整个标签被静默丢弃。
- 确保模板引擎（如 Nunjucks、EJS、Handlebars）在渲染时已将环境变量解析为合法值，例如
<base href="https://cdn.example.com/v3/">或<base href="/myapp/"> - 验证方式：打开页面后执行
document.baseURI，返回值应与你期望的基准完全一致 - 禁止输出含
../、缺协议、结尾无斜杠的 href，比如/myapp（少斜杠）、static/（非根相对）、http://localhost:3000（少斜杠）都会导致失效
构建时 HTML 插件比硬编码更可靠
Vite、Webpack 等构建工具可通过插件在生成最终 HTML 时自动注入 <base>，比手写或模板拼接更可控，尤其适合多环境部署。
例如 Vite 中配置 build.base = "/staging/"，配合 index.html 中的 <base href="%BASE%">（再用插件替换），能确保所有产出 HTML 的 href 与 publicPath 严格对齐。
立即学习“前端免费学习笔记（深入）”；
- Webpack 用户应启用
HtmlWebpackPlugin的templateParameters，把publicPath映射到模板变量 - 避免同时设置
publicPath和手动写死<base href="/subpath/">，否则资源路径可能被拼两次（如/subpath/subpath/js/app.js） - CDN 场景下推荐用完整绝对 URL（如
https://cdn.example.com/v4/），不依赖当前域名，也规避了协议/子路径切换问题
微前端和 SPA 场景下 base href 必须与路由配置协同
单页应用（SPA）或微前端子应用部署在子路径时，<base href="/subpath/"> 和前端路由的 base 配置（如 Vue Router 的 base: '/subpath/'）是两套独立机制，缺一不可。
只设 <base href="/subpath/">：JS/CSS 加载正常，但 router.push('/home') 会跳到 /home（根路径），不是 /subpath/home；只设路由 base：跳转正常，但 <script src="index.js"> 请求的是 /index.js，实际文件在 /subpath/index.js，404。
- Vue Router / React Router v6+ 必须显式传入
base参数，不能指望<base>自动同步 - 微前端场景还要核对子应用 Webpack 的
publicPath，三者值必须一致，否则 Service Worker 缓存、预加载、动态 import 全部错位 -
<base>不影响fetch()、import()、CSS@import，这些仍按当前页面 URL 解析，别误以为加了 base 就一劳永逸
验证 base 是否生效的关键检查点
上线后发现资源 404，却找不到报错？大概率是 <base> 没起作用——它失效时浏览器不警告、不报错，只默默退回到用当前页面 URL 当基准。
- 打开 DevTools → Network 标签页，看某个
script请求的真实 URL 是什么，是否已按预期拼上前缀 - 执行
document.baseURI，确认返回值是你写的 href，且以/结尾（如/myapp/） - 检查
<base>是否真的在<head>最前面，有没有被<title>或<link>挡在后面 - 搜索页面源码中是否意外出现第二个
<base>（比如多个组件各自v-html注入），Chrome 会提示Multiple base elements detected. Only the first one is used.
<base>，而是它一旦写错，所有相对路径资源（图片、CSS、JS、form action）都会静默 404，而控制台一片安静。你得习惯在每次部署后第一时间查 document.baseURI 和 Network 请求地址，而不是等用户反馈“页面白屏”。 
