base href必须以http://、https://、//或/开头且结尾带斜杠，否则浏览器静默丢弃导致批量404；仅影响html解析阶段的纯相对路径，须置于最前且唯一存在。
base href 必须以 / 开头且结尾带斜杠
浏览器对 <base href> 的校验极其严格：只要值不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台不报错、不警告，所有 src="logo.png" 仍按当前页面 URL 解析，上线后批量 404。
常见无效写法包括：href="assets/"（相对路径）、href="../static"（含 ..）、href="/myapp"（结尾缺斜杠）。
真正有效的只有两种：
-
href="/myapp/"—— 根相对路径，开头必须是/，结尾斜杠不可省；否则 Firefox/Opera 会截断路径（如css/app.css变成/myappcss/app.css） -
href="https://cdn.example.com/v3/"—— 绝对 URL，协议、域名、版本全明确，部署最稳
base 标签必须放在 最顶部且唯一
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。
典型翻车场景：
-
<base href="/static/">→ 被忽略 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ 只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used. - 用 JavaScript 动态插入：
document.head.appendChild(baseEl)→ 已解析的<img src="x">不会重算，只影响之后新创建的元素
前端路由（Vue Router / React Router v6+）不读 document.baseURI
<base href="/subapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不读 document.baseURI，必须手动传入 base 配置项。
漏配后果明显：
- Vue Router：
createRouter({ base: '/subapp/' })，否则router.push('/home')会跳到根路径 - React Router v6+：
<router basename="/subapp"></router>，否则导航和匹配全部错位 - 资源加载走
/subapp/js/app.js，点击链接却跳到/home，行为割裂
构建工具（Vite/Webpack）的 base 与 HTML 中的
Vite 的 build.base 或 Webpack 的 publicPath 若和 HTML 中的 <base href="/subapp/"> 值相同，会导致资源路径被拼两次，例如 /subapp//subapp/js/app.js。
SPA 项目中更推荐的做法是：
- 统一由构建工具控制 public 资源路径（如 Vite 的
base配项），HTML 中不写<base> - 若 HTML 中写了
<base href="/subapp/">，则构建工具的base或publicPath必须设为空字符串或""，避免叠加 - Service Worker 缓存策略若依赖
self.location.origin + '/subapp/'，而 HTML 没配<base>，预缓存路径就会错位
最容易被忽略的是：本地开发时用 http://localhost:3000/ 作 href 比用 / 更安全，能避免和后端路由冲突；而生产环境走 CDN 时，用完整绝对 URL（如 https://cdn.example.com/v2.3/）比根相对路径更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
