<base>标签会全局重写所有相对URL解析起点，必须为绝对URL或根相对路径（如/myapp/），且置于<head>最前唯一存在；否则静默失效导致资源404，不影响JS/CSS内部路径。
<base> 标签不是“可选配置”，而是会全局重写所有相对 URL 解析起点的硬性规则。用错就 404，且浏览器不报错——它直接静默失效。
base href 必须是绝对 URL 或根相对路径，否则被浏览器忽略
浏览器只认两种合法格式：https://cdn.example.com/（含协议）、/myapp/（以 / 开头且结尾带斜杠）。写成 assets/、../static/ 或 %PUBLIC_URL%/ 都会被丢弃，后续所有 src="logo.png" 仍按当前页面 URL 解析，上线后资源全挂。
-
/myapp/是 SPA 部署在子路径时唯一安全的写法；结尾缺斜杠（如/myapp）在 Firefox 中可能截断后续路径 -
//cdn.example.com/v2/可自动继承当前协议，适合混合 HTTP/HTTPS 环境 -
file:///D:/dist/仅限本地调试，Chrome 和 Safari 对file://下<base>支持不一致
base 必须放在 <head> 最顶部，且只能有一个
它影响的是 HTML 解析器对后续标签中相对 URL 的初始解析逻辑。如果 <base href="/app/"> 写在 <link href="style.css"> 后面，那这个 CSS 就完全不受控制——仍按原页面 URL 加载。
- 正确顺序：
<head><base href="/app/"><title>...</title><link href="style.css"></head> - 模板拼接或 SSR 场景下，务必检查是否重复注入；多个
<base>时只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used. - 禁止用 JavaScript 动态插入：
document.head.appendChild(baseEl)—— 已解析的<img src="x">不会重算，只影响之后新创建的元素
target 属性会全局劫持所有未显式声明 target 的链接
<base target="_blank"> 看似省事，但会让所有没写 target 的 <a>、<form>、甚至第三方组件里的链接都新开窗口。更危险的是，老版本浏览器不会自动补 rel="noopener"，存在 opener 漏洞风险。
立即学习“前端免费学习笔记（深入）”；
- 若必须用，应配合
rel="noopener"显式声明：<a href="/login" target="_blank" rel="noopener"> -
<base target="_self">无实际意义（本来就是默认行为），纯属冗余 -
target不影响<iframe>的name或src解析，只作用于跳转行为
base 不影响 JS 和 CSS 内部路径，别指望它管 url() 或 fetch()
<base href="/cdn/"> 不会让 background: url(logo.png) 变成 /cdn/logo.png，也不会让 fetch("api/data") 自动加前缀。它只作用于 HTML 属性中的相对 URL：如 <img src="x">、<script src="y">、<link href="z">、<a href="p">、<form action="q">。
- CSS 中的
url()始终相对于 CSS 文件位置，与<base>无关 - JS 中的动态路径（
import()、fetch()、new URL()）取决于执行上下文，需手动传入document.baseURI或配置构建工具 - 现代前端框架（React Router v6+、Vue Router）靠配置项
base控制路由，不依赖<base>标签
真正容易被忽略的点是：它既不能替代构建工具的 publicPath，也不能和微前端子应用的 base path 混用。一旦项目里同时存在 Webpack 的 publicPath、Vite 的 base 配置、以及手写的 <base>，路径冲突几乎必然发生——而错误表现往往是部分资源加载成功、部分 404，排查起来毫无规律。
