<base>标签仅对纯相对路径（如"logo.png"、"app.js"）生效，即既无协议也无开头斜杠的URL；它不改变绝对URL（含http://、https://）或根相对路径（以/开头）的解析行为。
<base> 标签不改变绝对 URL 的解析行为——写 href="https://example.com/js/app.js" 或 src="/css/main.css"，浏览器根本不会看 <base> 一眼。
base href 对哪些 URL 生效？只拼纯相对路径
它只接管形如 "logo.png"、"app.js"、"style.css" 这类**既无协议、也无斜杠开头**的路径。这类路径才叫“纯相对路径”，浏览器才会拿 document.baseURI 去拼。
-
<img src="icon.svg">→ 拼成https://cdn.example.com/v3/icon.svg（如果<base href="https://cdn.example.com/v3/">） -
<script src="./utils.js">→./是合法相对前缀，仍被拼接 -
<link href="/admin/style.css">→ 以/开头，直接按根路径解析，<base>不介入 -
<iframe src="https://api.example.com/frame">→ 含协议，完全绕过<base>
为什么 href="assets/" 这种写法等于没写
浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他一律静默丢弃——控制台不报错，但后续所有 src="logo.png" 都退回到按当前页面 URL 解析。
-
<base href="assets/">→ 被忽略，src="main.js"变成https://example.com/current/path/main.js -
<base href="../static">→ 含..，规范禁止，直接丢弃 -
<base href="/myapp">→ 缺结尾斜杠，Firefox/Opera 会把css/app.css拼成/myappcss/app.css -
<base href="https://cdn.example.com/v3">→ 缺结尾斜杠，部分浏览器可能截断为https://cdn.example.com/v3css/
base 和 JS/CSS 中的路径是两套系统
<base> 是 HTML 解析器在加载阶段做的“一次性拼接”，JS 运行时构造的路径（比如 fetch()、import()、new Worker()）和 CSS 的 @import 完全不受影响。
立即学习“前端免费学习笔记（深入）”；
-
fetch("./api/user")→ 按当前页面 URL 解析，不是document.baseURI -
import("./utils.js")→ 模块解析由打包工具或浏览器 ES 模块机制决定，与<base>无关 -
background: url(avatar.jpg)→ 这个生效，因为是 HTML 加载 CSS 文件时，用<base>解析 CSS 文件里的相对url() -
@import "reset.css"→ 不生效，CSS 的@import是 CSS 引擎自己 resolve 的，不走 HTML 解析流程
SPA 部署子路径时最容易漏掉的对齐点
加了 <base href="/admin/">，不代表前端路由就自动适配。Vue Router、React Router v6+、Vite 构建配置都得显式设 base 或 basename，否则 router.push("/home") 仍跳到根域名下。
- Vite 已配
build.base: "/admin/"，HTML 中再写<base href="/admin/">可能导致双斜杠（如/admin//admin/js/app.js） - Webpack 的
publicPath和<base href>若值相同，资源路径可能被拼两次 -
<base>必须放在<head>最顶部，前面不能有<title>或<meta>，否则它之后的资源才生效，之前的已按原始 URL 解析完毕
真正关键的不是“要不要用 <base>”，而是搞清它只管 HTML 解析那一刻的静态拼接——JS 动态路径、构建产物路径、路由 base 配置，这三者必须各自对齐，缺一不可。
