标签重置相对 url 解析起点，必须置于 最前且仅一个；href 需为绝对 url 或根相对路径（结尾带斜杠），仅影响 html 静态属性，与 js/css 运行时路径无关。
<base> 标签不是“加前缀”，而是直接重置整个 HTML 解析器对相对 URL 的起点——设错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错。
base href 必须写在
浏览器按顺序解析 HTML，<base> 只对它之后出现的相对 URL 生效。如果写在 <title></title> 或 <link> 后面，那些资源仍按当前页面 URL 解析，大概率 404。
- ✅ 正确顺序：
<base href="https://cdn.example.com/v3/"> <title></title> <link rel="stylesheet" href="main.css"> - ❌ 错误写法：把
<base>放在<script></script>或<img>后面；或放在里（浏览器直接忽略） - ⚠️ 多个
<base>：只有第一个生效，其余被静默丢弃；Vue/React 组件中动态插入尤其危险，DOM 已开始解析，后续资源不会重算
href 值必须是绝对 URL 或根相对路径，结尾必须带斜杠
浏览器会静默忽略非法 href 值，不报错但完全失效，退回到用当前页面 URL 当基准——这是部署后资源批量 404 的最常见原因。
- ✅ 推荐：
href="https://cdn.example.com/v3/"（明确、跨环境稳定） - ✅ 合法：
href="/myapp/"（适用于 SPA 部署在子目录，结尾斜杠不能少） - ✅ 可用：
href="//cdn.example.com/v3/"（协议相对，自动继承 http/https） - ❌ 无效：
href="assets/"、href="../static/"、href="%PUBLIC_URL%/"（未被构建工具替换时就是字面量字符串，浏览器不认）
它只影响 HTML 静态属性，和 JS/CSS 内部路径完全无关
<base> 只作用于 HTML 解析阶段的相对 URL，对运行时动态行为完全无效。这意味着：
- ✅ 影响：
<a href="about.html"></a>、<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、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>控制——它直接拼到当前域名下
SPA 项目里慎用，优先走构建配置或路由 base 参数
硬塞 <base href="/myapp/"> 很可能让前端路由和资源加载行为打架。Vue Router v4+ 和 React Router v6+ 都要求显式传入 base 配置，它们不读 document.baseURI。
- Webpack/Vite 构建时用
publicPath或base配置自动重写 HTML 中的<base>，比手写更可靠 - Vite 默认插入
<base href="/">，如果你又手动加了<base href="/myapp/">，后者会被忽略 - 部署到子目录（如
https://example.com/blog/）时，Vite 的base配置应设为"/blog/"，而非"./"或"blog/"
真正难的不是加一行 <base href="/xxx/">，而是确保它在整个构建、部署、运行链路中不被覆盖、不被误解、不与其他机制（如路由 base、JS 动态 fetch、CSS @import）产生隐性冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
