<base> 标签必须使用绝对 URL 或根相对路径（如 /myapp/），否则被浏览器静默丢弃，导致相对资源 404 且控制台无报错；其 href 值须以 http://、https://、// 或 / 开头，结尾必须带斜杠；与构建工具 publicPath 混用会引发双斜杠 404；SPA 路由需独立配置 base，JS 运行时路径不受影响；<base> 必须置于 <head> 最顶部才生效。
<base> 标签和绝对路径组合不是“技巧”，而是唯一合法的用法。其他写法（如相对路径、变量占位、缺斜杠）都会被浏览器静默丢弃，导致所有相对资源 404 —— 且控制台不报错，排查成本极高。
为什么href必须是绝对 URL 或根相对路径
浏览器解析 <base> 时只做字符串前缀匹配：值必须以 http://、https://、// 或 / 开头，否则整条标签被丢弃。这不是兼容性问题，是规范强制要求。
-
href="static/"→ 无效，被忽略，<img src="logo.png">仍按当前页面 URL 解析 -
href="../assets"→ 含..，直接失效 -
href="/myapp"→ 结尾无斜杠，Firefox 会截断成/myappcss/，导致css/app.css变成/myappcss/app.css -
href="https://cdn.example.com/v3"→ 缺结尾斜杠，虽多数浏览器容忍，但url(logo.png)可能拼接异常
<base href> 和构建工具 publicPath 的冲突点
当同时使用 <base href="/myapp/"> 和 Webpack 的 publicPath: "/myapp/"（或 Vite 的 build.base: "/myapp/"），资源路径会被拼两次，出现 /myapp//myapp/js/app.js 这类双斜杠 404。
- 推荐方案一：只用构建工具控制资源前缀，HTML 中不写
<base> - 推荐方案二：只用
<base>控制 HTML 层路径，构建工具设publicPath: ""（空字符串） - 切勿混用相同路径值，尤其在子路径部署的 SPA 场景下
SPA 路由配置必须与 <base> 独立对齐
<base href="/myapp/"> 对 Vue Router 或 React Router v6+ 完全无效 —— 它们不读 document.baseURI，必须显式传入 base 配置。
立即学习“前端免费学习笔记（深入）”；
- Vue Router：
createRouter({ base: '/myapp/' }) - React Router v6+：
<Router basename="/myapp"> - 若 HTML 写了
<base href="/myapp/">但路由没配base，router.push('/home')会跳到/home而非/myapp/home，路由失焦 - fetch、import、Worker 等 JS 运行时路径完全不受
<base>影响，别指望它统一重写
最常被忽略的一点：base 标签生效的前提是它必须出现在 <head> 最顶部，早于所有 <link>、<script>、<img>；一旦顺序错位，它就形同虚设，而你很难意识到问题出在这里。
