标签重置 html 解析器对后续相对 url 的基准起点，必须为绝对 url 或根相对路径（结尾带斜杠），且须置于 最前面、唯一存在；仅影响解析阶段的 src、href 等属性，不控制 js/css 运行时路径或前端路由。
<base> 标签不是“加前缀”，而是重置 HTML 解析器对后续所有相对 URL 的基准起点；设错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只接受 href 值以 https://、http://、// 或 / 开头。其他写法一律被静默忽略：
-
href="assets/"、href="../static/"、href="dist/js/"→ 全部无效，<base>形同虚设 -
href="/myapp"（缺尾斜杠）→ Firefox/Opera 可能截断成/myappcss/，导致style.css请求错位 -
href="https://cdn.example.com/v3"（缺尾斜杠）→ 同样风险，应写成https://cdn.example.com/v3/ -
href="/myapp/"→ ✅ 合法，适用于部署在https://example.com/myapp/的 SPA -
href="https://cdn.example.com/v3/"→ ✅ 推荐，协议、域名、路径全明确，不依赖当前页上下文
base 标签必须放在 最前面且只能有一个
<base> 的作用发生在 HTML 解析阶段，只对它之后出现的标签生效。位置或数量错，等于没写：
- 正确顺序：
<base href="/app/"> <title>App</title> <link href="main.css"> - 错误写法：
<link href="main.css"> <base href="/app/">→main.css已按原始页面 URL 解析完毕 - 放在
里？浏览器直接忽略，不警告也不报错 - 多个
<base>？只有第一个生效；Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild()）？完全无效 —— 解析阶段早已结束
哪些路径真正受 base 控制，哪些完全不受
<base> 只影响 HTML 解析阶段的纯相对属性值，JS/CSS 运行时路径、前端路由、构建配置全都不读它：
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg)（这是唯一穿透到 CSS 的情况） - ❌ 完全不受控：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe> - ⚠️ 半受控：
document.baseURI返回<base href>的值，可用于new URL('data.json', document.baseURI)，但window.location和路由匹配逻辑完全不依赖它
SPA 项目中 base 与前端路由必须显式对齐
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径；它们完全不读 document.baseURI，必须手动传入 base 配置项：
- Vue Router：
createRouter({ base: '/myapp/' })，否则router.push('/home')会跳到根路径 - React Router v6+：
<router basename="/myapp"></router>，否则导航和匹配全部错位 - Webpack/Vite 的
publicPath或base配置若和 HTML 中的<base>值重复，会导致资源路径被拼两次（如/myapp//myapp/js/app.js） - 服务端模板或构建时注入
<base href="%7B%7B%20previewBase%20%7D%7D">是预览环境唯一可靠方式；硬编码 + 手动改值极易出错
最容易被忽略的是：它只在解析那一刻起效，且只管 HTML 属性里的字符串。一旦你写了 fetch('./api') 或在 CSS 里写了 @import，<base> 就彻底退出了这场游戏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
