标签只能静态声明且在html解析阶段生效，无法通过js动态修改；预览环境需在服务端或构建时注入正确href值，并确保其为绝对url或合法根相对路径。
base 标签不能动态重置，只能静态声明且必须在解析前生效
你无法在页面加载后通过 JS 修改 <base> 来“动态重置”相对路径基准——浏览器只在 HTML 解析阶段读取第一个 <base href="...">，DOM 构建完成后插入或修改它完全无效。所谓“动态预览环境”下想靠 JS 改 <base> 实现路径切换，结果只会是资源 404 且控制台静默无提示。
预览环境要改基准，必须在 HTML 输出前确定 href 值
本地开发或 CI 预览时，路径基准往往随部署上下文变化（如 /preview/v2/、/staging/），这时需让 <base> 的 href 值在 HTML 被浏览器下载前就写对：
- 服务端模板（如 Express、Nunjucks）中用变量注入：
<base href="%7B%7B%20previewBase%20%7D%7D">，确保previewBase是绝对 URL（如https://preview.example.com/v2/）或合法根相对路径（如/preview/v2/，结尾带斜杠） - Vite/Webpack 构建时，通过
base配置 + HTML 模板插值生成：<base href="<%=%20VITE_BASE_URL%20%>">，避免硬编码 - 纯静态预览（如 GitHub Pages 子目录）：直接写
<base href="/my-project/">，并确认所有src/href属性用的是纯相对路径（如js/app.js），而非../或assets/
常见预览失败原因：href 值非法或位置错位
预览时图片、JS、CSS 全部 404？大概率是 <base> 的 href 写错了，或放错了地方：
-
href值不是以http://、https://、//或/开头 → 浏览器静默丢弃整条标签，退回到用当前页面 URL 当基准 -
<base>写在<title></title>或<link>后面 → 这些标签已按原始 URL 解析完毕，不受影响 - 多个组件各自渲染一个
<base>（如 Vue 中重复v-html注入）→ 只有第一个生效，其余被忽略，且 Chrome 控制台会输出Multiple base elements detected. Only the first one is used. - 写了
href="dist/"或href="../public/"→ 这些是非法值，<base>失效
别指望 base 控制 JS/CSS 里的路径，预览时要分开处理
即使 <base href="/preview/"> 正确生效，它也只影响 HTML 属性中的纯相对路径，比如：
-
<img src="logo.png">→ 解析为/preview/logo.png -
<link href="style.css">→ 解析为/preview/style.css - CSS 中的
background: url(avatar.jpg)→ 也会被重写为/preview/avatar.jpg（这是唯一穿透到 CSS 的情况）
但它完全不管：
-
fetch('./api/data.json')→ 仍发向当前页面所在路径 -
import('./utils.js')→ 由打包工具 resolve，和<base>无关 - CSS 中的
@import "reset.css"→ 不受影响 -
<iframe src="/admin/frame.html"></iframe>→ 根相对路径，直接拼到域名下，绕过<base>
预览环境出问题，先查 document.baseURI 是否是你期望的值，再单独排查 JS 动态请求和 CSS @import 的路径逻辑——它们从来就不归 <base> 管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
