是最安全选择，因其为合法根相对路径（以/开头且结尾带/），自动继承协议和域名，不依赖页面路径深度，避免firefox截断等风险，且仅影响html解析阶段的纯相对url。
<base> 标签在多层级文档结构中能统一重置所有相对 URL 的解析起点，但必须写对位置、值合法、且只影响 HTML 解析阶段的静态属性——写错一个字符或放错一行，<img src="logo.png"> 就 404，浏览器还不报错。
为什么多级目录下 <base href="/subpath/"> 是最安全的选择
部署在 https://example.com/a/b/c/page.html 这类路径时，不设 <base>，<script src="js/app.js"></script> 会拼成 https://example.com/a/b/c/js/app.js；设成 <base href="/a/b/"> 后，它才变成 https://example.com/a/b/js/app.js。根相对路径（以 / 开头 + 结尾带 /）自动继承当前协议和域名，不依赖当前页面深度，也不怕路径跳转。
-
/subpath/合法，/subpath非法（Firefox 会截断为/subpathcss/） - 避免用
../或./：浏览器直接忽略整个<base>标签 - 本地开发可配
http://localhost:3000/，比/更易区分后端路由冲突
<base> 必须放在
HTML 解析是自上而下的。<base> 只对它之后出现的相对 URL 生效。如果 <link href="style.css"> 写在 <base> 前面，那这个 CSS 一定按原始页面 URL 解析，<base> 完全无效。
- 正确顺序：
<base href="/app/"> <title></title> <link href="main.css"> - 错误示例：
<link href="main.css"> <base href="/app/">→main.css不受控 - 放在
里？浏览器静默忽略，控制台无提示
哪些路径真受影响，哪些根本绕过 <base>
<base> 只干预 HTML 解析阶段的纯相对路径（既无协议、也无 / 开头），不是全局路径代理。很多你以为它能管的，其实完全不管。
- ✅ 影响：
<img src="icon.svg">、<script src="bundle.js"></script>、<link href="theme.css">、CSS 中的background: url(avatar.jpg) - ❌ 不影响：
fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js') - ⚠️ 半影响：
document.baseURI返回<base href>值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
构建工具注入 <base> 比手写更可靠，但要防重复
Vite、Webpack 等工具默认可能已注入 <base href="/">，你再手动加一个，后者会被静默丢弃。Chrome 控制台会提示 Multiple base elements detected. Only the first one is used.，但很多人没看。
- Vite 配置应设
base: "/blog/"（结尾斜杠不能少），而非"./"或"blog/" - Webpack 的
HtmlWebpackPlugin若启用inject: 'head'，建议禁用手动<base>，统一由插件注入 - 服务端模板（如 Hugo）需确保
{{ .Site.BaseURL }}被真实值替换，而不是字面量字符串发到浏览器
真正难的不是写一行 <base href="/xxx/">，而是确保它在整个构建、部署、运行链路中不被覆盖、不被误解、不被忽略——尤其是当多个系统（构建工具、SSR 模板、CDN 配置）都试图控制同一份路径时。
