标签必须为绝对url或根相对路径（以/开头且结尾带/），且须置于最顶部唯一存在，否则被静默丢弃；它仅影响html解析阶段的相对路径属性（如src、href、action），对js运行时路径、css@import、fetch等无效。
<base> 标签不是“可有可无”的元数据，它一旦写错，所有 src、href、action 的相对路径都会悄悄失效——浏览器不报错，但资源 404，页面白屏或样式错乱。它只在 HTML 解析阶段起作用，且生效条件非常苛刻。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 http://、https://、// 或 / 开头的 href 值；其他写法（如 static/、../assets、https://example.com）整条 <base> 被静默丢弃。
-
<base href="https://cdn.example.com/v2.3/">✅ 推荐：部署稳定，跨环境一致 -
<base href="/myapp/">✅ 合法：根相对路径，但必须以/开头且结尾带/ -
<base href="https://example.com">❌ 失效：结尾缺/，Firefox 会拼出https://example.comcss/app.css -
<base href="assets/">❌ 失效：无协议、无域名、非根路径，直接忽略
base 标签必须放在 最顶部且唯一
<base> 影响后续所有 HTML 属性中相对 URL 的解析起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，等于没写。
- 正确顺序：
<base href="/app/"> <title>...</title> <link href="style.css"> -
<base href="/app/">❌ 被忽略 - SSR 模板中 header 和 page 分别渲染一个
<base>→ 控制台提示Multiple base elements detected. Only the first one is used.，第二个无效 -
document.head.appendChild(baseEl)❌ 动态插入无效：已解析的<img src="x">不会重算路径
哪些属性真受影响，哪些完全不受影响
<base> 只改写 HTML 解析阶段的硬编码相对路径，对 JS 运行时路径、CSS @import、fetch 等完全无感。
- ✅ 明确受影响：
<img src="logo.png">、<link href="style.css">、<script src="index.js"></script>、<form action="login.php"></form>、CSS 中background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、CSS @import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA 部署子路径时，base 和前端路由必须配对设置
Vue Router 的 base: '/subpath/' 和 HTML 的 <base href="/subpath/"> 是两套独立机制，缺一不可。
- 只设
<base href="/subpath/">：JS chunk 能加载，但router.push('/home')会跳到/home（根路径），不是/subpath/home - 只设 Vue Router
base：HTML 中<script src="js/chunk.js"></script>仍按当前页 URL 解析，404 - 微前端场景下，若子应用同时配置了 Webpack
publicPath和<base href="/subpath/">，资源路径可能被拼两次 →/subpath/subpath/js/app.js
最容易被忽略的是：所有构建工具（Vite、Webpack）生成的 HTML 都要确保 <base> 的值和实际部署路径严格一致，且不能依赖客户端 JS 替换——服务端模板或构建时注入才可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
