标签无法被动态修改，因浏览器仅在html解析阶段读取首个，后续dom操作不触发重解析，已发出的资源请求不受影响。

<base> 标签无法被动态修改——浏览器只在 HTML 解析阶段读取第一个 <base href="">，DOM 构建完成后插入、替换或修改它，对已解析的资源路径完全无效。

为什么 document.querySelector('base').href = '...' 没用

HTML 解析器在构建 DOM 时一次性处理 <base>，之后所有相对 URL（如 <img src="logo.png">）都已完成解析并进入加载队列。JS 修改 href 属性只是改了 DOM 节点的值，不会触发重解析，也不会修正已发出的请求。

• 控制台执行 document.baseURI 可能返回新值，但这是“假象”——它只是读取当前节点属性，并不反映实际资源解析行为
• <link href="style.css"> 已按原始页面 URL 发起请求，改 <base> 不会中断或重发
• Chrome/Firefox 均不报错、不警告，静默失败，排查时极易误判

哪些“看似动态”的操作实际也无效

所有在 DOMContentLoaded 或 window.onload 之后的操作，本质都是“事后补救”，无法改变已发生的解析逻辑：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• document.head.appendChild(baseEl)：标签晚于解析阶段插入，浏览器直接忽略
• document.write('<base href="/new/">')：仅在文档未关闭时有效（如内联 script 中），现代 SPA 场景下几乎不可控，且破坏流式渲染和 SEO
• Vue/React 组件中用 v-html 或 dangerouslySetInnerHTML 注入 <base>：多个组件可能各自渲染一个，但只有第一个生效，其余被丢弃，控制台提示 Multiple base elements detected. Only the first one is used.

真正可行的“动态基准”替代方案

所谓“动态”，必须落实到 HTML 字节流生成前，而非运行时 DOM 操作：

• 服务端模板（如 Express + EJS）：<base href="<%=%20previewBase%20%>">，确保 previewBase 是绝对 URL（如 https://staging.example.com/v2/）或合法根相对路径（如 /v2/）
• Vite 构建：base 配置项自动注入 HTML 模板，配合 process.env.BASE_URL 在不同环境生成不同 <base href="">
• 纯静态预览（如 GitHub Pages 子目录）：CI 脚本在构建后、部署前用 sed 替换 <base href="/>%20%E4%B8%BA%20<base%20href=">，确保所有 src/href 用的是纯相对路径（如 js/app.js）

容易被忽略的关键细节

即使你绕过 JS 动态修改、改用构建或服务端注入，仍需盯紧三处硬性约束：

• href 值必须以 http://、https://、// 或 / 开头，且根相对路径结尾必须带 /（/myapp ❌，/myapp/ ✅）
• <base> 必须是 中第一个标签，早于 <title></title>、<link>、<script></script>
• <base> 不影响 fetch()、import()、@import、<iframe src></iframe> 等运行时路径，这些需单独配置（如路由 basename、构建 publicPath）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！