base href必须是绝对URL或根相对路径（结尾带斜杠），否则被静默忽略；它仅影响HTML解析阶段的纯相对路径，且需与前端路由base配置对齐，否则导致资源加载和导航割裂。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 http://、https://、// 或 / 开头的 href 值，其他写法——比如 static/、../assets/、%PUBLIC_URL%/——整条 <base> 会被静默忽略。你不会在控制台看到报错，但所有 <img src="logo.png"> 都退回到按当前页面 URL 解析，上线后批量 404 就从这儿来。
常见翻车点：
-
href="/myapp"缺尾斜杠 → Firefox/Opera 可能拼成/myappcss/app.css -
href="https://cdn.example.com/v3"缺尾斜杠 → 同样触发截断逻辑 -
href="//cdn.example.com/v3"合法，协议相对，自动继承当前页的http或https -
href="/myapp/"合法，适用于 SPA 部署在子路径，但必须和前端路由的base配置对齐
base 标签必须放在 <head> 最顶部且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，这个动作发生在解析阶段，且仅对它之后出现的标签生效。放错位置或数量，等于没写。
典型错误：
立即学习“前端免费学习笔记（深入）”；
- 写在
<title>或<link>后面 →main.css已按原始页面 URL 解析完毕，<base>对它无效 - 放进
<body>→ 浏览器直接忽略，不警告也不报错 - 多个
<base>→ 只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 服务端模板拼接时 header 和 page 各 render 一个 → 后者被丢弃，但你可能根本没意识到
base href 只影响 HTML 解析阶段的纯相对路径
<base> 不是全局路径代理，它只在 HTML 解析时起作用，且只覆盖特定属性中的纯相对路径（即不带协议、不带开头 / 的路径）。
它确实影响：
<img src="logo.png"><script src="app.js"><link href="style.css">- CSS 文件中
background: url(avatar.jpg)
它完全不影响：
-
fetch('./api/data.json')—— 路径相对于 JS 执行上下文 -
import('./utils.js')—— 构建工具或运行时解析，与 HTML 无关 -
@import "reset.css"—— CSS @规则按 CSS 文件自身位置解析 -
<img src="/admin/frame.html">—— 根相对路径，直接拼到当前域名，绕过<base>
SPA 项目里不能只靠 base href，必须同步配置路由
Vue Router v4+ 和 React Router v6+ 完全不读 document.baseURI。写个 <base href="/myapp/"> 不会让 router.push('/home') 自动变成 /myapp/home；它只会让 <script src="app.js"> 加载到 /myapp/app.js，而路由仍跳向根路径，结果就是资源加载和导航行为割裂。
必须显式对齐：
- Vue Router：
createRouter({ base: '/myapp/' }) - React Router：
<Router basename="/myapp"> - 构建工具（Vite/Webpack）：用
base或publicPath配置自动生成正确<base>，比手写更可靠
最易被忽略的一点：即使你把 <base> 写对了，只要路由没配 base，页面就能打开，但点击链接就跳错——这种问题往往要等测试环境才暴露，且排查路径分散，容易误判为路由 bug 而非 HTML 基准配置缺失。
