<base>标签的href属性重置HTML解析器对所有相对URL的基准起点，必须置于<head>最前且唯一；仅影响纯相对路径（如logo.png），不影响绝对URL、根相对路径（如/admin）、JS动态请求或CSS @import。
<base> 标签的 href 属性不是“加前缀”，而是直接重置整个 HTML 解析器对相对 URL 的起点。设错一个字符，<img src="logo.png"> 就 404 —— 它生效极快、影响极广、出错极静默。
base href 必须放在 <head> 最前面，且只能有一个
浏览器按顺序解析 HTML，<base> 只对它之后出现的相对 URL 生效。如果写在 <title> 或 <link> 后面，那些资源仍按当前页面 URL 解析，大概率 404。
- ✅ 正确顺序：
<base href="https://cdn.example.com/v3/">必须是<head>中第一个元素 - ❌ 错误写法：把
<base>放在<script>或<img>后面；或放在<body>里（浏览器直接忽略） - ⚠️ 多个
<base>：只有第一个生效，其余被静默丢弃，Vue/React 组件中动态插入尤其危险
href 值必须是绝对 URL 或根相对路径，结尾必须带斜杠
浏览器会静默忽略非法 href 值，不报错但完全失效，退回到用当前页面 URL 当基准 —— 这是部署后资源批量 404 的最常见原因。
- ✅ 推荐：
href="https://cdn.example.com/v3/"（绝对 URL，明确、跨环境稳定） - ✅ 合法：
href="/myapp/"（根相对路径，适用于 SPA 部署在子目录，结尾斜杠不能少） - ✅ 可用：
href="//cdn.example.com/v3/"（协议相对，自动继承 http/https） - ❌ 无效：
href="assets/"、href="../static/"、href="%PUBLIC_URL%/"（未被构建工具替换时就是字面量字符串，浏览器不认）
它只影响 HTML 静态属性，和 JS/CSS 内部路径完全无关
很多人以为设了 <base href="/cdn/">，CSS 里的 background: url(logo.png) 就会自动变成 /cdn/logo.png —— 不会。这是两个独立解析流程。
- ✅ 影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、CSS 中的url(avatar.jpg)（注意：是 CSS 里的url()函数，不是@import） - ❌ 不影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css" - ⚠️ 特别注意：
<a href="/admin">这种根相对链接，根本不受<base>控制 —— 它直接拼到当前域名下
SPA 项目里慎用，优先走构建配置或路由 base 参数
硬塞 <base href="/myapp/"> 很可能让前端路由和资源加载行为打架。Vue Router v4+ 和 React Router v6+ 都要求显式传入 base 配置，它们不读 document.baseURI。
- ✅ 推荐方案：Webpack/Vite 用
publicPath或base配置自动注入<base>，比手写更可靠 - ✅ 替代方案：不用
<base>，所有资源路径改用根相对写法（如src="/static/js/app.js"），由服务器或框架处理映射 - ⚠️ 真要用：必须和
createRouter({ base: '/myapp/' })、basename等保持一致，否则路由跳转和<img>加载可能指向不同路径
最常被忽略的一点是：你改了 <base href>，却没检查 CSS 文件里 url() 引用的图片是否也适配了新基准 —— 因为它确实会被重写，而很多人根本没意识到这点。
