base标签是控制HTML中所有相对URL解析起点的唯一标准方式，必须置于<head>最上方且唯一，href值须为绝对URL或根相对路径（如/myapp/），否则会被浏览器静默忽略导致404。
base 标签是控制整个 HTML 文档中所有相对 URL 解析起点的唯一标准方式。它不解决“路径拼错”或“资源不存在”的问题，只决定“相对路径从哪开始算”。用错位置、值不合法、或与其他机制冲突，反而会让链接全部失效。
为什么 base 标签加了但图片/脚本还是 404
常见原因不是标签没写，而是 href 值不符合规范：
-
href必须是**绝对 URL**（如https://cdn.example.com/assets/）或**根相对路径**（如/myapp/），结尾必须带斜杠；./、../、不带尾斜杠的/myapp都会被浏览器忽略或解析出错 -
base必须位于<head>内最上方，且在任何<link>、<script>、<img>之前；放在<meta>后面都可能被部分浏览器跳过 - 页面中若存在 JavaScript 动态拼接的 URL（比如
fetch('./api/user')），它们仍按当前文档 URL 解析，不受base影响 - 某些前端框架（如 Vue Router、React Router）的路由模式（
history）会依赖base，但若配置不一致（例如构建时设了publicPath: '/admin/'，而base写成/app/），静态资源和路由都会错乱
如何验证 base 是否生效
别只看 HTML 源码，要以浏览器实际行为为准：
- 打开开发者工具控制台，执行
document.baseURI—— 返回值必须与你写的href完全一致（协议、域名、路径、尾斜杠缺一不可） - 检查 Network 面板里每个 404 请求的「Initiator」列：如果是
HTMLParser，说明是base生效后解析失败；如果是XHR或Script，说明是 JS 代码里硬编码的路径有问题 - 右键页面任意相对链接（如
<a href="about.html">），选择「在新标签页中打开链接」，观察地址栏最终跳转的完整 URL 是否符合预期
与构建工具（Webpack/Vite）配合时的关键冲突点
现代构建流程常自动注入 base，但容易和手写标签打架：
- Vite 默认在
index.html中插入<base href="/>；如果你又手动加了一个<base href="/myapp/">，后者会被忽略（HTML 规范只认第一个base） - Webpack 的
HtmlWebpackPlugin若启用inject: 'head'并传入templateParameters，可能覆盖你手写的base；建议统一由插件注入，禁用手动写法 - 当部署到子目录（如
https://example.com/blog/）时，Vite 的base配置应设为"/blog/"，而非"./"或"blog/"—— 后两者不会被识别为合法 base 值
真正难的不是加一行 <base href="/xxx/">，而是确保它在整个构建、部署、运行链路中不被覆盖、不被误解、不和 JS 路由或动态请求产生隐性冲突。每次改完记得清缓存再测，因为浏览器对 base 的解析结果可能被强缓存。
