标签的href属性不支持运行时动态切换，浏览器仅在HTML解析阶段读取一次，后续JS修改base.href不影响已解析资源；真正可行的是构建或服务端阶段注入环境值。
<base> 标签的 href 属性本身**不支持运行时动态切换环境**——浏览器只在 HTML 解析阶段读取一次，之后修改 document.querySelector('base').href 不会影响已解析的 <img src="logo.png" alt="如何在HTML中利用base标签的href属性动态切换全站开发和生产环境" > 或 <script src="app.js"></script> 的路径。所谓“动态切换”，实际是构建或服务端阶段的行为，不是前端 JS 能实时翻盘的事。
为什么 document.baseURI 改了但资源还是 404
浏览器解析 HTML 是单向、一次性的：<base href="/dev/"> 必须在 <link>、<script></script> 等标签之前出现，否则那些资源早已按原始页面 URL 解析完毕。JS 后续执行 baseEl.href = "/prod/" 只影响新创建的元素（比如 document.createElement('img')），对已有 DOM 完全无效。
- 控制台执行
document.baseURI返回新值 ≠ 资源重加载，只是属性变了 - 常见误操作：在
window.onload里改<base>，此时所有src/href已解析完成 - Vue/React 组件中用
useEffect或mounted插入<base>，DOM 已开始渲染，等于白做
真正可行的环境切换方式：构建时注入
把环境差异固化在构建产物里，而不是指望浏览器运行时补救。Vite、Webpack、Next.js 等现代工具链都支持通过配置生成不同 href 值的 <base>。
- Vite：配置
base: process.env.NODE_ENV === 'production' ? 'https://cdn.example.com/v3/' : '/'，它会自动写入 HTML 的<base href="..."> - Webpack：设
output.publicPath，配合HtmlWebpackPlugin模板里的<base href="<%=%20htmlWebpackPlugin.options.publicPath%20%>"> - 服务端模板（如 Hugo）：用
{{ .Site.BaseURL }}，部署时由 CI 注入真实值，确保输出是/myapp/或https://cdn.example.com/v3/，而非字面量%PUBLIC_URL%
开发时本地预览怎么避免 404
本地开发服务器（如 Vite Dev Server、webpack-dev-server）通常不走 <base>，而是靠代理或路由重写兜底。但如果你硬要测试 <base href="/myapp/"> 行为，必须满足两个条件：
立即学习“前端免费学习笔记（深入）”；
- 开发服务器提供子路径服务：例如访问
http://localhost:5173/myapp/，而不是http://localhost:5173/ -
<base href="/myapp/">中的路径与实际访问路径严格一致（结尾斜杠不能少） - 检查
document.baseURI是否真为http://localhost:5173/myapp/，不是http://localhost:5173/—— 后者说明<base>被静默忽略（可能因 href 缺少斜杠或格式非法）
最易被忽略的一点：SPA 部署到子路径时，<base href="/subpath/"> 和前端路由的 base 配置（如 Vue Router 的 createRouter({ base: '/subpath/' })）必须完全一致，差一个字符，就会出现“页面能打开、路由能跳、但图片全 404”的割裂现象。
