标签仅在 html 解析阶段生效，只影响纯相对路径（如 src="app.js"），且 href 必须为绝对 url 或根相对路径（如 /myapp/），否则被忽略；它不影响 fetch、import、@import 等运行时路径。
<base> 标签在多级目录下不是“自动适配路径”的魔法开关，它只在 HTML 解析阶段生效，且对 href 值极其挑剔——写错就静默失效，所有相对路径退回到页面 URL 解析，404 风险陡增，还毫无提示。
base href 必须是绝对 URL 或根相对路径，否则直接被忽略
浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他写法一律丢弃：
-
href="assets/"→ 缺协议和域名，被忽略 -
href="../css/"→ 含..，规范禁止，被忽略 -
href="/subapp"→ 结尾没/，Firefox/Opera 会截断拼接（如css/app.css变成/subappcss/app.css） -
href="${PUBLIC_PATH}"→ 若构建未替换，浏览器收到字面量字符串，照样失效
真正安全有效的只有两种：
-
href="https://cdn.example.com/v2.3/"（绝对 URL，推荐用于 CDN） -
href="/myapp/"（根相对路径，开头和结尾都必须是/）
哪些资源真受 base 影响，哪些完全不受
<base> 不是运行时代理，只改写 HTML 解析时的纯相对路径（即不以 /、: 或协议开头）：
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x"> - ⚠️ 半受影响：
document.baseURI返回<base href>的值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
多级目录部署时，base 与前端路由、构建工具极易冲突
SPA 部署在子路径（如 https://example.com/a/b/c/）时，<base href="/a/b/c/"> 和框架配置必须严格对齐：
- Vue Router / React Router v6+ 必须显式设
base: '/a/b/c/'，它们不读document.baseURI - Webpack 的
publicPath和 HTML 中手写的<base href="/a/b/c/">若同时存在且值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时若已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位
本地开发与生产环境的 href 写法建议不同
本地开发时用 href="http://localhost:3000/" 比用 href="/" 更安全，能避免和后端路由冲突；生产环境走 CDN 时，用完整绝对 URL（如 href="https://cdn.example.com/v2.3/"）比根相对路径更可控。另外，<base> 必须放在 顶部且只能出现一次，放到 里或动态 document.write 注入，都会导致行为不可靠（尤其 Firefox/IE）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
