标签不是优化工具，而是重置html解析器对纯相对url的起点，设错即全404且浏览器不报错；仅影响html解析阶段的相对url（如src、href），对js/css运行时路径、前端路由无效；href必须为绝对url或结尾带斜杠的根相对路径（如"/myapp/"），非法值静默失效导致资源批量404。
<base> 标签不是“优化”相对路径的工具，它是重置 HTML 解析器对所有纯相对 URL 的起点——设错就全 404，且浏览器不报错。它只在 HTML 解析阶段生效，不改 JS、CSS 运行时行为，也不自动同步前端路由。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器会静默忽略非法值，退回到用当前页面 URL 当基准，这是子目录部署后资源批量 404 的主因。
-
href="/myapp/"✅ 合法：等价于https://example.com/myapp/，适用于 SPA 部署在https://example.com/myapp/index.html -
href="https://cdn.example.com/v3/"✅ 推荐：协议、域名、版本全明确，不依赖当前页上下文 -
href="//cdn.example.com/v3/"✅ 可用：协议相对，自动继承当前页 http/https -
href="assets/"❌ 无效：纯相对路径，浏览器直接丢弃整条<base> -
href="../static/"❌ 无效：含..，不被接受 -
href="/myapp"❌ 危险：结尾缺斜杠，Firefox/Opera 会截断路径（css/app.css→/myappcss/app.css）
base 必须放在 最前面，且只能有一个
HTML 解析是自上而下的，<base> 只对它之后出现的相对 URL 生效。位置或数量错，等于没写。
- ✅ 正确顺序：
<base href="/myapp/"> <title>...</title> <link href="style.css"> - ❌ 错误写法：
<link href="style.css"> <base href="/myapp/">→style.css已按原始页面 URL 解析完毕 - ❌ 放在
里？浏览器直接忽略，无警告 - ❌ 多个
<base>？只有第一个生效，其余静默丢弃；Chrome 控制台提示Multiple base elements detected. Only the first one is used.
SPA 项目中必须和前端路由、构建配置对齐
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们完全不读 document.baseURI，必须手动传入 base 参数。
- Vue Router：
createRouter({ history: createWebHistory('/myapp/'), ... }) - React Router v6+：
<browserrouter basename="/myapp"></browserrouter> - Vite 构建：
build.base: '/myapp/'，此时 HTML 中再手写<base href="/myapp/">会导致路径拼两次（如/myapp//myapp/js/app.js） - Webpack：
publicPath: '/myapp/'与 HTML 中<base>值重复，同样引发双拼
哪些路径受控，哪些完全不受控
别被名字骗了。<base> 只影响 HTML 属性中的纯相对 URL，JS/CSS 动态路径、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" - ⚠️ 半受控：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
真正难的不是加一行 <base href="/xxx/">，而是确保它在整个构建、部署、运行链路中不被覆盖、不被误解、不和 JS 路由或动态请求产生隐性冲突——尤其是 href 值非法时，浏览器静默失效，连控制台都不提醒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
