base href必须是绝对URL或根相对路径（以/开头且结尾带斜杠），否则浏览器静默忽略，导致后续纯相对路径按当前页URL解析而批量404；必须置于head最前且唯一，仅影响HTML解析阶段的src/href等纯相对路径。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器对 <base> 的 href 值校验极严：只接受以 http://、https://、// 或 / 开头的值。任何其他写法（如 "assets/"、"../static/"、"subapp/"）都会被整条忽略——不报错、不警告，但后续所有 src="logo.png" 都退回到按当前页面 URL 解析，404 风险集中爆发。
常见翻车点：
-
href="/myapp"→ 缺尾部/，Firefox/Opera 会截断拼接（css/app.css变成/myappcss/app.css） -
href="%PUBLIC_PATH%/"→ 构建未替换，浏览器收到字面量字符串，直接失效 -
href="file:///D:/dist/"→file://协议下部分浏览器（尤其 Chrome）静默忽略
✅ 推荐写法：
-
href="https://cdn.example.com/v3/"（生产 CDN 场景，最可控） -
href="/myapp/"（子路径部署，结尾斜杠不可省） -
href="//cdn.example.com/v3/"（协议相对，适配 http/https 混合环境）
base 标签必须放在 最顶部且唯一
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，因此它必须是 中第一个元数据类标签。位置或数量出错，等于没写。
立即学习“前端免费学习笔记（深入）”；
典型错误：
- 放在
<link>或<script></script>之后 → 已解析的资源不受影响 - 放在
内 → 浏览器直接忽略 - 重复声明两个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used.
正确顺序示例：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<head> <base href="/myapp/"> <title>App</title> <link href="style.css"> <script src="app.js"></script> </head>
多级目录部署时，base 与前端路由、构建工具必须显式对齐
<base href="/a/b/c/"> 不会让 Vue Router 自动识别子路径；框架路由完全不读 document.baseURI，必须各自显式配置 base 参数。
否则行为割裂：
- Vue Router：需
createRouter({ history: createWebHistory('/a/b/c/') })，否则router.push('/home')跳到根路径 - React Router v6+：需
<router basename="/a/b/c"></router>，否则导航和匹配全部错位 - Webpack
publicPath和 HTML 中手写的<base href="/a/b/c/">若同时存在且值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签
Service Worker 缓存策略若依赖 self.location.origin + '/a/b/c/'，而 HTML 没配 <base>，预缓存路径就错位——这种错位不会报错，但资源永远不命中缓存。
哪些路径真受 base 控制，哪些完全不受
<base> 只在 HTML 解析阶段起作用，改写的是纯相对路径（即不以 /、: 或协议开头）的初始解析逻辑。它不是全局代理，更不介入 JS/CSS 运行时行为。
✅ 真受影响（HTML 属性中纯相对路径）：
<img src="icon.png" alt="HTML中base标签在不同目录层级间的切换方案" ><script src="app.js"></script><link href="style.css">- CSS 文件中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，非 CSS 引擎自己 resolve）
❌ 完全不受影响（JS/CSS 运行时构造的路径）：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="/admin/frame.html"></iframe>（根相对路径，直接拼域名）
⚠️ 特别注意：<img srcset="logo-2x.png 2x" alt="HTML中base标签在不同目录层级间的切换方案" > 不走 base 规则；fetch("api/users") 会被解析成 /a/b/c/api/users（如果 base 是 /a/b/c/），但多数人忘了这点，导致 API 请求挂掉。
