base href值必须以/、http://、https://或//开头且结尾带/才生效，否则整条标签被静默忽略，导致所有纯相对路径资源批量404；仅影响html解析阶段的src/href等属性，对js运行时路径（如fetch、import）完全无效。
base href 值必须以 /、http://、https:// 或 // 开头，否则整条标签被静默忽略
浏览器对 <base> 的 href 值校验极严：只要不是这四种开头，标签就直接丢弃，不报错、不警告，后续所有纯相对路径（如 logo.png）仍按当前 HTML 文件 URL 解析——上线后批量 404，排查时极难定位。
常见无效写法：href="assets/"、href="../static/"、href="cdn/v2"、href="https://example.com"（结尾缺 /）。
真正有效的只有：
-
href="https://cdn.example.com/v3/"✅ 协议+域名+路径，CDN 场景最可控 -
href="/myapp/"✅ 根相对路径，结尾/不可省（Firefox 会把/myapp截成/myappcss/） -
href="//cdn.example.com/v3/"✅ 协议相对，自动继承当前页 http/https，适合混合协议环境
base 只影响 HTML 解析阶段的纯相对路径，且仅作用于其后的标签
<base> 不是“加前缀”，而是重置 HTML 解析器对后续纯相对路径（即不以 /、: 或协议开头）的基准起点。它只在解析 HTML 文档时起一次作用，之后就不管了。
这意味着：
-
<img src="icon.svg">、<script src="bundle.js"></script>、<link href="theme.css">会被重写 - CSS 中的
background: url(avatar.jpg)是唯一穿透到 CSS 的情况，也会被重写 -
<a href="page.html"></a>和<form action="submit.php"></form>同样受控 - 但
href="/admin"（根相对）、href="https://api.example.com"（绝对）、href="javascript:void(0)"（伪协议）完全不受影响
顺序错误等于没写：<base> 必须放在 最前面，早于 <title></title>、<meta>、<link> 等任何可能含相对路径的标签。
base 对 JS/CSS 运行时路径完全无效，别指望它管 fetch 或 import
这是最容易踩坑的地方：加了 <base href="/cdn/">，不代表 fetch('./api/data.json') 就会发到 /cdn/api/data.json——它根本不会。
以下全部不受 <base> 影响：
-
fetch('./api/user')、fetch('../data.json') -
import('./utils.js')、new Worker('./worker.js') - CSS 中的
@import "reset.css"、srcset="logo-2x.png 2x" -
<iframe src="page.html"></iframe>（它的src相对于 iframe 当前 URL，不是父页面）
JS 动态生成的路径、打包工具（Webpack/Vite）的 publicPath、Service Worker 缓存策略，都得单独配置，和 <base> 毫无关系。
多级子路径部署时，base 与前端路由/构建配置必须严格对齐
SPA 部署在 https://example.com/a/b/c/ 时，<base href="/a/b/c/"> 是必要但不充分条件。若没同步调整其他环节，就会出现资源加载正常但路由跳转错位、或路由正常但 JS/CSS 404 的割裂现象。
关键对齐点：
- Vue Router / React Router v6+ 必须显式传入
base: '/a/b/c/'，它们不读document.baseURI - Webpack 的
publicPath若也设为'/a/b/c/'，而 HTML 中又手动写了<base href="/a/b/c/">，可能导致路径拼接两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时若已配
base: '/a/b/c/'，HTML 中就不该再手写<base>标签 - Service Worker 的预缓存列表若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，缓存路径就错位
本地开发建议用 href="http://localhost:3000/" 而非 href="/"，避免和后端路由冲突；生产环境走 CDN 时，用完整绝对 URL 比根相对路径更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
