base标签href属性不能统一全站图片路径，仅重置HTML解析器对纯相对URL的基准起点；写错格式（如缺斜杠、非绝对或根相对路径）会导致浏览器静默忽略，引发批量404。
<base> 在混合应用（如 SSR + SPA、微前端、多入口构建）中极易引发路径错乱，不是“设了就稳”，而是“错一点，全崩”。它只在 HTML 解析阶段生效，且对 JS/CSS 运行时路径完全无效，硬套会掩盖真实路径管理问题。
base href 值必须以 / 开头且结尾带斜杠，否则静默失效
浏览器只认 href 值以 http://、https://、// 或 / 开头，且根相对路径必须以 / 结尾。写成 /myapp 或 static/，整个标签被丢弃——控制台无提示，但所有 <img src="logo.png"> 都按当前页面 URL 拼接，上线后批量 404。
常见翻车点：
-
href="/myapp"→ Firefox/Opera 截断为/myappcss/，导致style.css请求变成/myappcss/style.css -
href="assets/"→ 缺协议和根斜杠，被忽略 -
href="%PUBLIC_URL%/"→ 未被构建工具替换，发到浏览器就是字面量字符串，等同于无效 -
href="//cdn.example.com/v3"→ 缺结尾斜杠，部分 CDN 会拒绝或重定向失败
base 标签必须放在 <head> 最顶部，且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，等于没写。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<head><title>App</title><base href="/myapp/"></head>→<title>已解析完毕，<base>对它无效；更糟的是，若之前还有<meta>或<link>，它们已按原始 URL 加载 - SSR 模板拼接时，header 和 page 组件各自 render 一个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入：
document.head.appendChild(baseEl)→ DOM 解析早已完成，已加载的资源不会重算，只影响之后新创建的元素 - 把
<base>放进<body>→ 浏览器直接忽略，不警告也不报错
混合应用中 base 与前端路由、构建配置易冲突
Vue Router v4+、React Router v6+ 完全不读 document.baseURI，它们的 base 或 basename 必须显式传入。只配 <base href="/subapp/"> 而不配路由，会导致资源加载走 /subapp/js/app.js，但点击链接却跳到 /home —— 行为割裂。
更危险的是构建工具叠加：
- Webpack 的
publicPath: "/subapp/"+ HTML 中<base href="/subapp/">→ 资源路径可能被拼两次，变成/subapp//subapp/js/app.js - Vite 的
base: "/subapp/"默认会自动注入<base>，再手动加一个，等于重复 - 微前端子应用同时设了 Webpack
publicPath和 HTML<base>→ chunk 加载路径错位，白屏或 404
Service Worker 缓存策略若依赖 self.location.origin + '/subapp/'，而 HTML 没配 <base>，预缓存路径也会错位。
CSS url() 受影响但 @import 不受影响，这点常被忽略
<base href="/cdn/"> 会让 <style>background: url(logo.png);</style> 解析为 https://example.com/cdn/logo.png，这是 HTML 解析阶段的静态重写。
但以下完全不受控：
-
fetch('./api/data.json')→ 仍以window.location为基准 -
import('./utils.js')→ ESM 路径解析独立于<base> -
@import "reset.css"→ CSS 解析器不走 HTML 的<base>逻辑 -
<iframe src="/admin/frame.html">→ 根相对路径，直接拼到域名下，和<base>无关
真正容易踩坑的是：开发者以为 <base> 是“全局路径代理”，结果在 CSS 里写 url(./icon.svg) 期待它生效，实际只有不带 ./ 的纯相对路径（如 url(icon.svg)）才被重写。
