base标签href值必须在HTML初始解析时确定，仅首个位于<head>最前的合法值（以http://、https://、//或/开头且根相对路径结尾带/）生效，非法或动态插入均被静默忽略导致批量404。
base 标签的 href 值必须在 HTML 解析前就确定
浏览器只在初始解析 <head> 时读取第一个 <base>，DOM 构建完成后插入、修改或重写它完全无效。所谓“动态绑定”，不是靠 JS 改 document.head.appendChild(baseEl) 实现的，而是指在 HTML 字符串被发送给浏览器之前，由服务端或构建工具把正确的 href 值写进去。
常见错误现象：预览页所有 src 和 href 全部 404，控制台却无报错——大概率是 <base href="dist/"> 这类非法值被浏览器静默丢弃，退回到用当前页面 URL 当基准。
-
href必须以http://、https://、//或/开头，且根相对路径结尾必须带斜杠（如/preview/v2/） - 放错位置（比如在
<title>后面）会导致前面的<link>、<script>已按原始 URL 解析完毕，不受影响 - 多个组件各自渲染一个
<base>（如 Vue 中v-html注入），只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
Vite/Webpack 构建时如何注入合法的 base href
构建工具能确保 <base href="{{ publicPath }}"> 在 HTML 输出前就被替换成真实值，而不是把占位符原样发到浏览器。这是目前最可靠、可复现的“动态”方式。
关键点在于配置项与模板的配合：
立即学习“前端免费学习笔记（深入）”；
- Vite 中设
base: "/staging/"（根相对）或base: "https://cdn.example.com/app/"（绝对），HTML 插件会自动注入到<base>的href中 - Webpack 使用
HtmlWebpackPlugin时，通过templateParameters传入baseHref，并在 HTML 模板中写<base href=""> - 禁止在模板里硬写
<base href="%PUBLIC_URL%/">—— 如果环境变量没被构建流程替换，浏览器收到的就是字面量字符串，直接失效
服务端模板（如 Express/Nunjucks）中安全注入 previewBase
当预览环境由后端动态生成 HTML（例如 CI 预览服务返回不同子路径的页面），必须让模板引擎把运行时确定的路径变量注入到 <base> 中，且确保该变量是已解析的绝对 URL 或合法根相对路径。
示例（Nunjucks）：
<head>
<base href="{{ previewBase }}">
<title>Preview</title>
<link href="style.css" rel="stylesheet">
</head>
注意：previewBase 必须是类似 "https://preview.example.com/v2/" 或 "/preview/v2/" 的值，不能是 "../public" 或 "dist/"；也不能是未转义的用户输入，否则有 XSS 风险。
- 若用 Express，需在
res.render()时显式传入{ previewBase: req.previewPath }，且req.previewPath应由可信上下文（如 CI 环境变量）构造 - 避免在中间件中拼接 HTML 字符串并插入
<base>—— 容易遗漏闭合标签或破坏结构 - 部署后务必检查
document.baseURI是否等于预期值，这是唯一可靠的验证方式
为什么 document.write('
有人用 <script>document.write('<base href="' + location.origin + '/app/' + '">')</script> 试图“动态”设置，这确实能在某些旧场景下触发 HTML 解析器重读，但它破坏语义、阻塞渲染、干扰预加载，且现代浏览器（尤其是 Chrome 90+）对 document.write() 的限制越来越严。
更严重的问题是：它只对 document.write() 调用之后的标签生效，而 <title>、<meta> 等可能已在它之前解析完毕，导致 SEO 元数据丢失或资源加载错乱。
- 该方式无法在 SPA 水合（hydration）后补救，因为 DOM 已存在，HTML 解析阶段早已结束
- SSR 场景下，服务端不执行 JS，所以这个
document.write根本不会运行，前后端不一致 - 即使临时调试有效，也绝不能上线——它绕过了构建和部署的可追溯性，出问题时难以定位
真正容易被忽略的点：base 不是“路径前缀”，它是 HTML 解析器的基准重置开关。设错一个字符，所有纯相对路径就全崩，而且浏览器不报错、不警告，只默默 404。验证必须落在 document.baseURI 和实际资源加载结果上，而不是看代码里写了什么。
