base href必须是绝对URL或根相对路径（以/开头且结尾带/），否则浏览器静默忽略；须置于<head>最顶部且唯一；仅影响HTML解析阶段的src、href等纯相对路径及CSS url()，不影响fetch、import等运行时路径。
base href 必须是绝对 URL 或根相对路径，否则浏览器静默忽略
浏览器解析 <base> 时，只要 href 值不以 http://、https://、// 或 / 开头，整个标签就被丢弃——控制台无报错，但所有 src="logo.png" 都按当前页面 URL 解析，上线后必 404。
常见无效写法：
-
href="assets/"（缺协议且非根路径） -
href="../static"（含..，违反根相对路径规则） -
href="/myapp"（结尾没斜杠，Firefox 会截断成/myappcss/）
✅ 推荐写法：
-
href="https://cdn.example.com/v3/"（绝对 URL，部署可控） -
href="/myapp/"（根相对路径，结尾必须带斜杠） -
href="//cdn.example.com/v3/"（协议相对，自动继承当前协议）
base 标签必须放在 <head> 最顶部，且只能有一个
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
-
<body><base href="/static/"></body>（被忽略） - SSR 模板拼接时 header 和 page 各 render 一个
<base>（只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used.）
正确顺序示例：
<head> <base href="/myapp/"> <title></title> <link href="style.css"> <img src="logo.png"> </head>
base 只影响 HTML 静态属性，不影响 JS 动态请求和 CSS @import
<base> 仅在 HTML 解析阶段起作用，影响：<img src>、<link href>、<script src>、<a href>、<form action>，以及 CSS 中的 url() 函数（如 background: url('icon.svg')）。
完全不受影响的场景：
-
fetch('./api/data.json')—— 仍以当前页面 URL 为基准 -
import('./module.js')—— 不走<base> - CSS
@import 'theme.css'—— 是 CSS 解析行为，不依赖 HTML 基准
注意：url() 被重写是容易被忽略的关键点，比如你写了 background: url('i/bg.jpg')，而 <base href="https://cdn.example.com/">，最终请求的是 https://cdn.example.com/i/bg.jpg，不是当前域名下的路径。
SPA 和构建工具中 base 的双重重写风险
Vue Router（history 模式）、React Router 等 SPA 在子路径部署时，常配 <base href="/subpath/">，但这会和构建工具（如 Vite 的 build.base、Webpack 的 publicPath）产生叠加效应。
后果包括：
- 静态资源被错误拼接前缀，例如本该加载
/assets/index.js，却发出/subpath/assets/index.js请求 - history.pushState 跳转后刷新页面 404（服务端未配置 fallback）
- DevTools Network 面板里看到的请求 URL 已被
<base>重写，但你误以为是构建配置问题
建议策略：
- 构建时统一用工具配置（如 Vite
build.base），不再手动写<base> - 若必须手写
<base>，确保与构建输出路径严格一致，且只在 HTML 模板中出现一次 - 上线前务必检查 Network 面板中所有
src、href、url()类请求的实际地址
最易被忽略的其实是 CSS 里的 url() —— 它默默受 <base> 影响，但开发者常以为只改 JS 或 HTML 就够了。
