base标签是部署高频出问题的隐性开关，必须严格配置：href须以http://、https://、//或/开头，仅影响HTML中硬编码的相对路径，与JS/CSS运行时无关，SPA子路径部署时需与前端路由base同步。
base 标签不是“可学可不学”的知识点，而是部署环节高频出问题的隐性开关——没配对它，静态资源 404、路由跳转错乱、CDN 缓存失效都可能同时发生。
为什么 <base> 一加就报错或完全没效果
浏览器对 <base href=""> 的校验极其严格：只要 href 值不以 http://、https://、// 或 / 开头，整条标签就被静默丢弃，控制台零提示。你看到的“没效果”，其实是它根本没生效。
-
<base href="static/">→ 无效（缺协议/根斜杠） -
<base href="../assets">→ 无效（含..） -
<base href="https://example.com">→ 风险高（结尾缺/，Firefox 可能拼成https://example.comcss/app.css） -
<base href="https://cdn.example.com/v2.3/">→ 安全（推荐） -
<base href="/app/">→ 可用（但部署路径变更时必须同步改）
<base> 真正影响哪些路径，哪些完全绕过
它只在 HTML 解析阶段起作用，仅重写硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值），和 JS/CSS 运行时逻辑无关。
- ✅ 明确受影响：
<img src="logo.png">、<script src="index.js">、<link href="style.css">、<form action="login.php">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="page.html"> - ⚠️ 半受影响：
document.baseURI返回该值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL不变
SPA 部署到子路径时，<base href> 和前端路由必须配齐
Vue Router 的 base: '/subpath/' 和 HTML 中的 <base href="/subpath/"> 是两套独立机制，漏掉任一个都会出问题：
立即学习“前端免费学习笔记（深入）”；
- 只设
<base href="/subpath/">：JS 资源能加载，但router.push('/home')会跳到/home（根路径），不是/subpath/home - 只设 Vue Router
base：路由跳转正常，但<script src="index.js">加载失败（实际路径是/subpath/index.js，HTML 却请求了/index.js） - Vite 用户注意：
build.base已自动注入 HTML，再手动写<base href="">会导致路径重复（如/subpath//subpath/js/app.js）
本地开发 vs 生产环境的 href 写法差异
本地开发用 http://localhost:3000/ 比用 / 更安全，避免和后端路由冲突；生产环境优先用完整绝对 URL（如 https://cdn.example.com/v2.3/），而非根相对路径，因为 CDN 域名和主站域名常不一致，且无需随部署路径反复调整。
最容易被忽略的是：Service Worker 的预缓存路径、Webpack 的 publicPath、Vite 的 base、HTML 的 <base href> 必须全部对齐——差一个字符，资源就 404，而且 Network 面板里显示的请求地址已经“被 base 处理过”，你看到的已经是最终拼接结果，不是原始代码写的值。
