base标签仅在html解析阶段重置后续相对url基准起点，配错即导致资源404且无报错；href必须为以http://、https://、//或/开头且结尾带斜杠的绝对url或根相对路径，须置于最前且唯一，前端路由与构建配置须显式对齐。
<base> 标签不是“页面重组”的开关，它只在 HTML 解析阶段重置后续相对 URL 的基准起点。配错一个字符，src="app.js" 就 404，而且浏览器不报错、不警告——你看到的只是白屏或资源加载失败。
base href 值必须是绝对 URL 或根相对路径，否则静默失效
浏览器只接受 href 值以 https://、http://、// 或 / 开头。其他写法（比如 assets/、../static/、%PUBLIC_URL%/）整条标签被丢弃，毫无提示。
-
/myapp/✅ 合法：开头是/，结尾带斜杠；Firefox/Opera 不会截断路径 -
https://cdn.example.com/v3/✅ 推荐：协议、域名、路径全明确，部署可控 -
//cdn.example.com/v3/✅ 协议相对，自动继承当前页 http/https -
/myapp❌ 失效：结尾缺斜杠，Firefox 可能拼成/myappcss/app.css -
static/❌ 失效：不是绝对 URL，也不是根相对路径 -
"%PUBLIC_URL%/"❌ 失效：若未被构建工具替换，浏览器收到的就是字面量字符串
base 标签必须放在 最顶部且唯一
<base> 影响的是它之后出现的所有相对 URL。放错位置，等于没写；重复声明，只有第一个生效。
- ✅ 正确顺序：
<base href="/myapp/"> <title>App</title> <script src="app.js"></script> - ❌ 放在
<title></title>后：<link href="style.css">已按原始 URL 解析完毕，不受控 - ❌ 放在
里：浏览器直接忽略 - ❌ SSR 模板拼接出两个
<base>：Chrome 控制台提示Multiple base elements detected. Only the first one is used.，但第二个无声失效
前端路由和构建配置必须显式对齐，不能依赖 document.baseURI
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不读 document.baseURI，必须手动传入 base 或 basename。
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<router basename="/admin"></router> - Vite：
build.base或base配置项设为/admin/ - Webpack：
output.publicPath设为/admin/，否则与 HTML 中的<base>冲突，导致路径拼两次（如/admin//admin/js/app.js）
哪些路径受控，哪些完全不受控——别被名字骗了
<base> 是 HTML 解析期机制，仅作用于解析时遇到的纯相对值。JS 运行时构造的路径、CSS @import、fetch() 等，一概不认它。
- ✅ 受控：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、CSS 中的background: url(avatar.jpg) - ❌ 不受控：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半受控：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
最易被忽略的一点：你改了 <base href>，却忘了同步改构建工具的 publicPath 或路由的 base，结果资源加载和导航行为割裂——图片从 /myapp/logo.png 加载成功，点击链接却跳到 /home。这种问题不会报错，只会让你反复检查控制台 Network 面板，直到发现路径对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
