标签在多级目录下仅当部署路径固定且放弃js运行时路径控制权时才有实用价值，否则是隐患放大器；它只影响html解析阶段的纯相对路径（如img、script、link），对fetch、import等完全无效，且必须置于head最顶部、href以/开头并结尾带/，否则静默失效。
<base> 标签在多级目录下**只有当部署路径固定、且你明确放弃 JS 运行时路径控制权时，才有实用价值**；否则它大概率是隐患放大器，不是简化工具。
为什么多级目录里 <base href="/subpath/"> 容易被当成“救星”
开发者看到 https://example.com/a/b/c/page.html 里一堆 src="js/app.js" 解析成 /a/b/c/js/app.js，本能想用 <base href="/a/b/c/"> 把它统一收口。这个想法本身没错，但落地时三个条件必须同时满足：
-
<base>必须放在最顶部，前面不能有任何<link>或<script></script> -
href值必须以/开头、结尾带/（/subpath/✅，/subpath❌） - 所有前端框架路由、构建工具 publicPath、Service Worker 缓存路径，都得手动对齐这个值
<base> 在多级目录中真正能管住的路径有哪些
它只在 HTML 解析阶段改写“纯相对路径”，即既不带协议、也不以 / 或 : 开头的字符串。具体来说：
- ✅ 管得住：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、CSS 文件内background: url(avatar.jpg)（注意：这是 HTML 加载 CSS 时解析的） - ❌ 管不住：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x"> - ⚠️ 半管：document.baseURI 可用于构造 URL（如
new URL('data.json', document.baseURI)），但window.location和history.pushState()的相对路径仍按当前页面 URL 计算
多级目录部署时最常踩的三个坑
这些不是理论风险，而是上线后立刻 404 或白屏的高频现场：
-
<base href="../static/">或<base href="assets/">—— 浏览器静默忽略整条标签，控制台零提示，但所有src="logo.png"全部退回到按https://example.com/a/b/c/拼路径，批量 404 - Vite 已配置
build.base: '/a/b/c/'，HTML 中又手写<base href="/a/b/c/">—— 资源请求变成/a/b/c//a/b/c/js/app.js（双斜杠），Nginx 返回 404 -
<base href="/admin/">写了，但 Vue Router 没配base: '/admin/'—— 页面资源从/admin/js/app.js加载成功，点击<a href="/home"></a>却跳到https://example.com/home，白屏
本地开发和生产环境要不要用 <base>
本地开发建议直接不用——用 http://localhost:3000/ 作 href 值虽可行，但容易和后端代理规则冲突；更稳妥的是靠 Vite/Webpack 的 dev server 自动处理路径。生产环境若必须用，优先选绝对 URL：<base href="https://cdn.example.com/v3/">。它不依赖当前页协议/域名，不会因页面路径深度变化而失效，也绕过 Firefox 对结尾缺 / 的截断 bug。
真正容易被忽略的点是：<base> 不是路径开关，它是 HTML 解析期的一次性重写动作，一旦写错位置或值，所有依赖它的静态资源就失去控制，而且浏览器连 warning 都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
