base href必须是绝对URL或根相对路径（以/开头且结尾带斜杠），否则浏览器静默忽略；须置于<head>最前且唯一；仅影响HTML属性中纯相对路径（如src、href），对fetch、import等JS路径及CSS@import无效。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器只认 href 值以 https://、http://、// 或 / 开头的写法。其他形式——比如 static/、../assets、https://example.com（结尾没斜杠）——整条 <base> 都被丢弃，控制台零提示，但所有 src="logo.png" 会退回到按当前页面 URL 拼接，上线后大面积 404。
✅ 正确写法只有两类：
- <base href="https://cdn.example.com/v3/">（推荐，部署稳定，跨环境无歧义）
- <base href="/myapp/">（根相对路径，结尾必须带斜杠，否则 Firefox 会把 /myapp/css/app.css 错拼成 /myappcss/app.css）
❌ 常见翻车：
- <base href="%PUBLIC_URL%/">：构建工具没替换就发到浏览器，变成字面量字符串
- <base href="assets/">：缺协议和域名，浏览器直接跳过
- <base href="/myapp">：结尾没斜杠，部分浏览器截断路径
base 标签必须放在 <head> 最顶部且唯一
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，不是报错，而是静默降级或只取第一个。
常见错误场景：
- <body><base href="/static/"></body>：标签在 <body> 内，被浏览器忽略
- SSR 模板中 header 和 page 各 render 一个 <base>：控制台提示 Multiple base elements detected. Only the first one is used.，后一个完全无效
- <head><title>Page</title><base href="/app/"><link href="style.css"></head>：title 在 base 前，style.css 不受 base 影响
正确顺序示例：<head><base href="/myapp/"><title>App</title><link href="style.css"><script src="index.js"></head>
哪些资源真受影响，哪些完全绕过 base
<base> 只在 HTML 解析阶段起作用，不是运行时 URL 代理。它只改写硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值），其余全部无视。
立即学习“前端免费学习笔记（深入）”；
✅ 明确受影响：
- <img src="logo.png">
- <script src="app.js">
- <link href="style.css">
- <form action="login.php">
- CSS 文件中 background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响：
- fetch('./api/user')
- import('./utils.js')
- @import "reset.css"（CSS @import 规则）
- <iframe src="page.html">（src 是动态加载，不走 base）
- <img srcset="logo-2x.png 2x">（srcset 解析逻辑独立）
SPA 部署子路径时，base 标签和前端路由必须严格对齐
单页应用部署在子路径（如 https://a.com/myapp/）时，<base href="/myapp/"> 和前端路由配置（如 Vue Router 的 base: '/myapp/'）是两套独立机制，缺一不可，也不能错位。
典型问题：
- 只设 <base href="/myapp/">，但 Vue Router 没配 base：JS chunk 能加载，但 router.push('/home') 会跳到 /home（根路径），不是 /myapp/home
- Webpack publicPath 和手写 <base href="/myapp/"> 值相同：资源路径可能被拼两次，例如 /myapp//myapp/js/app.js
- Vite 已在 vite.config.ts 中设 base: '/myapp/'，再手动加 <base> 标签：冗余且易冲突
实操建议：
- Vite / Next.js 等现代构建工具优先用其原生 base 配置，HTML 中不手动加 <base>
- Vue Router / React Router v6+ 必须显式传入 base 参数，它们不读 document.baseURI
- Service Worker 缓存策略若依赖 self.location.origin + '/myapp/'，而 HTML 没配 <base>，预缓存路径就会错位
