<base>标签用于统一HTML静态资源路径解析基准，解决多环境部署时相对路径404问题，仅影响HTML解析阶段的src/href等纯相对URL，不影响JS/CSS运行时路径。
大型网站用 <base> 是为了统一控制 HTML 静态资源路径起点
不是为了“简化写法”，而是解决部署一致性问题。当一个 SPA 或静态站点生成器（如 Hugo、Next.js）要发布到多个环境（https://example.com/、https://example.com/blog/、https://cdn.example.com/v2/），所有 <script src="app.js">、<link href="style.css">、<img src="logo.png"> 这类硬编码的相对路径，必须按同一个基准解析，否则上线即 404。
典型场景：
- CDN 加速：HTML 文件在源站，但 JS/CSS/图片全走 CDN，
<base href="https://cdn.example.com/v3/">让所有src/href自动拼上 CDN 域名 - 子路径部署：Vue 应用部署在
/admin/下，不加<base href="/admin/">，<script src="index.js">就会请求/index.js（404），而不是/admin/index.js - 多语言或多区域站点：
/zh-CN/、/ja-JP/等路径下共用同一套 HTML 模板，靠模板引擎注入不同href值
<base href> 必须是绝对 URL 或根相对路径，否则静默失效
浏览器只认以 http://、https://、// 或 / 开头的值；其他写法（比如 static/、../assets/、/myapp 缺结尾斜杠）会被直接丢弃——控制台无报错，但所有相对路径回退到当前页面 URL 解析，上线后批量 404。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
-
<base href="static/">→ 缺协议和域名，被忽略 -
<base href="../css/">→ 含..，不被识别 -
<base href="/myapp">→ 结尾没/，Firefox 可能截断成/myappcss/app.css
正确写法：
-
<base href="https://cdn.example.com/v3/">（推荐 CDN 场景） -
<base href="/admin/">（根相对路径，结尾斜杠不可省） -
<base href="//cdn.example.com/v3/">（协议相对，但旧环境兼容性差）
<base> 不影响 JS/CSS 运行时路径，这是最容易误判的点
它只在 HTML 解析阶段起作用，对 fetch()、import()、new Worker()、@import、element.style.backgroundImage 全部无效。很多大型网站出问题，是因为开发者以为加了 <base href="/app/"> 后，fetch('./api/user') 也会发到 /app/api/user，结果接口全 404。
真正受影响的只有这些 HTML 属性中的纯相对路径（不以 /、: 或协议开头）：
<img src="icon.png"><script src="app.js"><link href="style.css"><a href="about.html">- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎 resolve 的）
不受影响的典型例子：
-
fetch('./api/user')→ 按当前页面 URL 解析 -
import('./utils.js')→ 按 JS 执行上下文解析 -
@import "reset.css"→ 按 CSS 文件所在路径解析 -
<iframe src="/admin/frame.html">→ 根相对路径，绕过<base>
SPA 部署时，<base href> 和前端路由必须配对，缺一不可
Vue Router 的 base: '/subpath/' 和 HTML 的 <base href="/subpath/"> 是两套独立机制，互不感知。只设一个，另一个必出问题：
- 只设
<base href="/admin/">：JS chunk 加载正常，但router.push('/home')会跳到/home（根路径），不是/admin/home - 只设 Vue Router
base：路由跳转正常，但<script src="index.js">请求/index.js（404），实际应在/admin/index.js
更复杂的情况还涉及构建工具：
- Vite 的
build.base和手写<base>双重设置 → 路径可能被拼两次（/admin//admin/js/app.js） - Webpack 的
publicPath和<base>值相同 → 同样有重复拼接风险 - Service Worker 缓存策略若依赖
self.location.origin + '/admin/'，但 HTML 没配<base>→ 预缓存路径错位
真正麻烦的从来不是单点配置，而是 HTML 解析、JS 运行时、构建产物、CDN 缓存、Service Worker 这五层路径逻辑必须全部对齐——漏掉任何一层，资源加载或路由行为就会割裂。
