base标签必须置于head最前且唯一，href须为绝对url或根相对路径（结尾带/），否则静默失效；它仅在html解析阶段影响a、img、script等标签的纯相对路径，不影响fetch、import等运行时路径。
base 标签必须放在 head 中且在其他依赖 URL 的标签之前
<base> 是个元数据标签，只对当前文档内所有相对 URL 生效，但它本身不生成任何内容。浏览器解析时会用它重写后续所有相对路径（比如 <a href="about.html"></a>、<img src="logo.png">、<script src="app.js"></script>），所以它必须在这些标签被解析前就“就位”。<base> 若出现在 里，会被忽略；若放在 里但排在 <link rel="stylesheet"> 或 <script></script> 后面，那些已解析的相对路径就来不及被修正。
多个 base 标签只会生效第一个，后续被忽略
HTML 规范明确要求：一个文档中最多允许一个 <base>。即使你写了两个：
<base href="https://a.example.com/"><base href="https://b.example.com/">
浏览器只认第一个，第二个完全被丢弃，控制台也不会报错——这容易让人误以为配置生效了。实际项目中常见错误是构建工具（如 Webpack 插件或 Vite 的 html plugin）自动注入了一个 <base>，而你在模板里又手动加了一个，结果后者失效却查不到原因。
href 属性必须是绝对 URL 或协议相对 URL，不能是相对路径
<base href="assets/"> 是无效的，会导致所有相对 URL 解析失败（例如 index.html 可能变成 assets/index.html，但浏览器会尝试从当前域根目录拼接，最终请求 https://site.com/assets/index.html，而非你期望的同目录下）。正确写法只有两类：
-
<base href="https://example.com/sub/">（绝对 URL） -
<base href="//example.com/sub/">（协议相对 URL，继承当前页协议）
注意：href 不支持 ./、../ 或空字符串；target 属性可选，但一旦设置，会影响所有带 target 的 <a></a>、<form></form> 等，且无法被单个元素覆盖（<a target="_self"></a> 仍会按 <base target="_blank"> 执行）。
Vue/React 单页应用中 base 标签常与路由模式冲突
使用 history 模式时，前端路由依赖浏览器地址栏真实路径，而 <base href="/admin/"> 会让 router.push("/user") 实际跳转到 /admin/user。这本身没问题，但容易漏掉两处：
- 服务端未配置 fallback：访问
/admin/user时，Nginx/Apache 必须把所有非静态资源请求回退到/admin/index.html，否则 404 - public 目录下的静态资源路径没同步调整：比如
<link href="/css/app.css">应改为<link href="/admin/css/app.css">，否则样式 404
更隐蔽的问题是：开发服务器（vite dev / webpack serve）默认不读取 <base>，所以本地跑着正常，一部署就白屏或资源加载失败。
<base>，而是它一旦生效，就静默接管所有相对 URL —— 包括你根本没意识到的地方，比如内联 SVG 的 <use href="#icon"></use>、CSS 里的 background: url(./bg.png)（注意：CSS 中的相对 URL 不受 <base> 影响，这是常被误传的点），以及第三方库动态插入的脚本链接。验证是否生效，最直接的方式是打开开发者工具 → Network 面板，看每个请求的 “Initiator” 和实际请求地址是否符合预期。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
