base标签不能实现环境切换，它仅控制HTML中相对URL的解析基准，不影响JS运行时逻辑、环境变量读取、重定向或条件加载，且无法动态修改。
base 标签本身不能实现环境切换
<base> 只控制相对 URL 的解析基准，比如 <img src="logo.png"> 会按 <base href="https://test.example.com/"> 拼成 https://test.example.com/logo.png。它不参与 JS 运行时逻辑、不读取环境变量、也不触发重定向或条件加载。想靠它“一键切测试/生产”是常见误解。
为什么有人误以为 base 可以切环境
现象常出现在：页面里大量用相对路径引用 API、图片、语言包，开发时手动改 <base href> 后发现部分资源加载变了——但这只是巧合生效，且只影响 HTML 层级的相对 URL（<a>、<img>、<link>、<script src>），对 fetch('/api/user') 或 new Image().src = 'icon.svg' 这类 JS 行为完全无效。
- JS 中的相对 URL 始终以当前页面 URL 为基准，不受
<base>影响（这是浏览器规范） -
<base>无法动态修改，只能在 HTML 加载前写死，刷新页面才生效 - 若同时存在多个
<base>，只有第一个生效；重复插入会静默忽略
真正可行的多环境资源路径方案
必须把环境差异点剥离到构建阶段或运行时可控位置，<base> 顶多辅助静态资源，绝不能当主力：
- API 请求地址：由 JS 读取构建时注入的全局变量，如
window.__API_BASE__，再拼接fetch(__API_BASE__ + '/user') - 语言包路径：Vite 用
define: { __LOCALES_BASE__: '"https://cdn.test.com/locales"' }，Webpack 用DefinePlugin注入LOCALES_BASE_URL - 静态资源（图片/CSS）：可配合
<base>，但前提是所有资源都严格走相对路径，且构建产物部署路径与href值一致，否则 404 - 绝对路径优先：CDN 场景下，直接写
https://prod-cdn.example.com/logo.png比依赖<base>更可靠
容易被忽略的兼容性坑
即使你坚持用 <base> 管理静态资源路径，也要注意：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 单页应用中，
<base href="/app/">必须和router.base或basename保持一致，否则路由跳转或资源加载失败 - 某些老版本 iOS Safari 对
<base>解析有缓存 bug，改了 href 不刷新页面可能不生效 -
<base target="_blank">会影响所有新窗口打开行为，容易导致意外的target="_blank"安全问题（缺少rel="noopener"） - HTML 预渲染（如 SSR）时，
<base>的值若依赖服务端上下文，需确保前后端一致，否则 CSR 渲染错乱
<base> 最稳妥的用法就一种：在纯静态 HTML 站点中，统一管理同域下的图片、样式、脚本等静态资源的相对路径基准。把它当成环境切换开关，等于把整个部署流程绑在一根不可控的 HTML 标签上。 
