标签是路径解析的全局开关，必须唯一置于 中且 href 需为绝对路径；它影响所有 html 相对 url，但不作用于 js 字符串拼接，js 动态路径需手动补全或通过配置变量注入。
<base> 标签不是可选装饰，而是路径解析的全局开关——一旦设错，所有相对 URL（href、src、form.action、image.srcset）都会指向错误位置，且浏览器不会报错，只静默失败。
base 标签必须放在
多个 <base> 会被忽略除第一个外的所有；若它出现在 或被 JS 动态插入，行为不可预测（Chrome 会忽略，Firefox 可能部分生效）。团队常因“临时调试加了个 base”导致本地能跑、CI 构建后资源全 404。
- CI 阶段用 HTML 解析器扫描
内是否唯一存在<base href="...">>，并校验href值以/开头（绝对路径）或协议开头（如https://cdn.example.com/） - 禁止使用
./或../开头的href值——它们在不同子目录下解析结果不一致，违背“简化路径”的初衷 - 开发服务器（如 vite dev server）默认不处理
<base>的路径重写，需显式配置base选项（vite.config.ts 中base: '/app/'），否则 HMR 热更新脚本路径错乱
base 影响所有相对 URL，但不改变 JavaScript 中的字符串拼接
这是最易踩的坑：<img src="logo.png"> 会按 <base href="/static/"> 解析为 /static/logo.png；但 document.getElementById('x').src = 'logo.png' 仍走当前页面路径，不受 <base> 控制。团队协作中，前后端联调时 JS 动态加载资源突然 404，往往卡在这点。
- 所有 JS 中构造的相对路径（
fetch('./api/user')、new Image().src = 'icon.svg'）必须手动补全前缀，或统一通过配置变量注入（如window.APP_BASE = '/app/'） - Webpack/Vite 构建时，
public/下静态资源引用应保持相对路径，但构建产物中<base>的href必须与output.publicPath严格一致，否则上线后图片、字体、JS chunk 全挂 - 服务端渲染（SSR）模板中，若 base href 依赖用户请求路径（如多租户子路径
/tenant-a/），不能硬编码，需由后端动态写入，否则静态生成页全部失效
多环境部署时 base href 必须差异化配置
开发、测试、预发、生产环境的静态资源路径通常不同（/、/test/、/staging/、https://cdn.example.com/v2.3.1/），靠手动改 HTML 不现实，也违反自动化原则。
- 构建流程中用模板替换：HTML 模板里写
<base href="%BASE_HREF%">，CI 脚本根据环境变量填入对应值 - 禁止在 JS 中读取
document.querySelector('base').href来推导 API 基地址——<base>是为 HTML 解析服务的，语义上和 API 路径无关；API 基地址应单独配置（如import.meta.env.VUE_APP_API_BASE） - 若使用微前端，主应用的
<base>不影响子应用资源加载（子应用有自己的 HTML 和 base），但子应用内跳转链接仍受主应用 base 影响——需约定子应用所有路由链接用绝对路径或location.origin + path
真正难的不是写对 <base>，而是让整个工具链（构建、部署、SSR、微前端、JS 动态加载）都意识到它的存在，并各自适配。漏掉任一环节，路径问题就会变成深夜排查的幽灵 Bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
