base href必须是绝对url或以/开头的根相对路径，否则标签被静默忽略导致404；须置于最前且唯一；仅影响html中纯相对路径（如logo.png），不影响js动态请求、css@import等。
base href 必须是绝对 URL 或以 / 开头的根相对路径
浏览器只接受 href 值以 http://、https://、// 或 / 开头，否则整个 <base> 标签会被静默忽略——你不会看到控制台报错，但所有 <img src="logo.png"> 都会按当前页面 URL 解析，结果就是 404。
常见错误写法：
-
href="static/"（缺协议和域名，被忽略） -
href="../assets/css/"（含..，被忽略） -
href="https://example.com"（结尾没斜杠，Firefox/Opera 会截断成https://example.comcss/）
✅ 正确写法示例：
-
<base href="https://cdn.example.com/v3/">（推荐，明确可控） -
<base href="/myapp/">（合法，结尾必须带/） -
<base href="//cdn.example.com/v3/">（协议相对，自动继承当前协议）
base 标签必须放在 最前面，且只能有一个
HTML 解析是自上而下的，<base> 的作用是为“后续所有相对 URL”重置解析起点。如果它写在 <link href="style.css"> 后面，那这个 CSS 就已经按原页面 URL 解析完了，<base> 对它完全无效。
必须满足：
- 位置：严格置于
内，且是第一个元数据类标签（早于<title></title>、<link>、<script></script>） - 数量：整个页面最多一个；多个时仅第一个生效，其余被丢弃（Chrome 控制台会提示
Multiple base elements detected. Only the first one is used.） - 禁止放在
中——浏览器直接忽略，不警告也不报错
错误顺序示例：<link href="main.css">
<base href="/app/"> → main.css 不受控。
哪些路径受 base 影响，哪些完全不受控
<base> 只在 HTML 解析阶段起作用，它改写的是属性值中**纯相对路径**（如 logo.png、js/app.js）的初始拼接逻辑，不是运行时代理。
✅ 明确受影响（src/href/action 中的相对路径）：
<img src="avatar.jpg"><script src="main.js"></script><link href="theme.css"><a href="about.html"></a>- CSS 中的
background: url(icon.png)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响（JS 动态请求、CSS @import、Worker 等）：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="page.html"></iframe>（src是相对 iframe 当前 URL，不是主页面）
SPA 项目里别硬塞 base，优先走构建配置和路由 base
Vue Router v4+、React Router v6+ 的 createRouter({ base: '/subpath/' }) 和 HTML 的 <base href="/subpath/"> 是两套独立机制，互不同步。只配一个，另一个大概率出问题：
- 只设 HTML
<base href="/admin/">，但 Vue Router 没配base→ 路由跳转到/，而不是/admin/ - 只配 Vue Router
base: '/admin/'，但 HTML 没设<base>→script加载/js/chunk.js404（应为/admin/js/chunk.js） - Webpack 的
publicPath或 Vite 的base配置若与 HTML<base>同时启用，资源路径可能被拼两次（/admin/admin/js/app.js）
微前端或 CDN 场景下，更建议用构建工具自动注入——比如 Vite 的 build.base = 'https://cdn.example.com/app/'，比手写 <base> 更可靠、可复现。
