base标签的href属性直接重置HTML解析器对后续所有相对URL的基准起点，而非简单加前缀；必须为绝对URL或根相对路径（结尾带斜杠），且须置于<head>最前、唯一存在，否则静默失效导致资源404。
base 标签的 href 属性不是“加前缀”，而是直接重置 HTML 解析器对所有后续相对 URL 的起点——写错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
href 值必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器会静默忽略非法 href 值，退回到用当前页面 URL 当基准，这是部署后资源批量 404 的最常见原因。
-
https://cdn.example.com/v3/：推荐，明确协议、域名、版本路径，适合 CDN 场景 -
/myapp/：合法根相对路径，等价于当前协议 + 域名 +/myapp/，适用于 SPA 部署在子路径（结尾斜杠不能少） -
//cdn.example.com/v3/：协议相对，自动继承当前页 http/https，适合多协议环境 -
assets/、../static/、%PUBLIC_URL%/：全部无效，浏览器不认，静默失效 -
https://example.com：结尾没斜杠，Firefox/Opera 可能截断成https://example.comcss/，导致路径错乱
base 必须放在 <head> 最前面，且只能有一个
HTML 解析是自上而下的，<base> 只对它之后出现的相对 URL 生效。位置或数量错，等于没写。
- 正确顺序：
<head><base href="https://cdn.example.com/v3/"><title></title><link rel="stylesheet" href="main.css"></head> - 错误写法：
<head><link href="main.css"><base href="/app/"></head>→main.css已按原始页面 URL 解析完毕 - 放在
<body>里？浏览器直接忽略，不警告也不报错 - 多个
<base>？只有第一个生效，其余被静默丢弃；Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild()）？完全无效 —— 解析阶段早已结束
它只影响 HTML 属性中的相对 URL，和 JS/CSS 运行时路径无关
这是最容易误判的一点：设了 <base href="/cdn/">，不代表 CSS 里的 url(logo.png) 就会变成 /cdn/logo.png。它根本不管这些。
立即学习“前端免费学习笔记（深入）”；
- ✅ 影响：
<img src="icon.svg">、<script src="bundle.js">、<link href="theme.css">、<a href="about.html">、<form action="submit.php">、CSS 中的background: url(avatar.jpg) - ❌ 不影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css" - ⚠️ 特别注意：
<img src="/admin/frame.html">这种根相对路径，根本不受<base>控制 —— 它直接拼到当前域名下，和href值无关
SPA 项目中慎用，优先走构建配置和路由显式 base
硬塞 <base href="/myapp/"> 可能导致静态资源加载和前端路由行为不一致，尤其当构建工具与手动 <base> 冲突时。
- Vue Router v4+、React Router v6+ 要求显式传入
base配置项（如createRouter({ base: '/myapp/' })），它们不读document.baseURI - Vite 默认在
index.html中插入<base href="/">；若你又手动加<base href="/myapp/">，后者会被忽略 - Webpack 的
HtmlWebpackPlugin若启用inject: 'head'，可能覆盖你手写的<base>；建议统一由插件注入，禁用手动写法 - 部署到子目录（如
https://example.com/blog/）时，Vite 的base配置应设为"/blog/"，而非"./"或"blog/"—— 后两者不会被识别为合法base值
真正难的不是加一行 <base href="/xxx/">，而是确保它在整个构建、部署、运行链路中不被覆盖、不被误解、不和 JS 路由或动态请求产生隐性冲突。验证是否生效，唯一可靠方式是打开控制台执行 document.baseURI，看返回值是否与你写的 href 完全一致（协议、域名、路径、尾斜杠缺一不可）。
