标签仅在html解析阶段生效，必须以/、http://、https://或//开头且结尾带/，否则静默失效导致404；须置于最前且唯一；不被前端路由读取，需与router base、构建工具配置严格对齐。
<base> 标签不是“设了就自动全局生效”的路径开关，它只在 HTML 解析阶段起作用，且极易因格式、位置或协同配置错误导致资源 404 或跳转错位——浏览器不报错、不警告，问题上线后才集中爆发。
base href 值必须以 /、http://、https:// 或 // 开头，且结尾带 /
浏览器对 <base href> 的校验是“全有或全无”：只要值不满足这四类开头之一，整条标签就被静默丢弃。常见无效写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..） -
href="/myapp（结尾没/，Firefox/Opera 会截断成/myappcss/app.css） -
href="%PUBLIC_PATH%/"（构建工具未替换时就是字面量字符串）
真正合法的只有两种形式：
-
href="/myapp/"（根相对路径，开头和结尾都必须是/） -
href="https://cdn.example.com/v3/"（绝对 URL，协议+域名+路径全明确）
base 标签必须位于 最顶部，且只能有一个
<base> 的作用是重置后续所有相对 URL 的解析基准，所以它必须是 中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级：
- 写在
<title></title>或<link>后面 → 它对前面已解析的资源（如<link href="style.css">）完全无效 - 写在
里 → 浏览器直接忽略 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，新元素才受影响 - SSR 模板拼接出两个
<base>→ 控制台提示Multiple base elements detected. Only the first one is used.，第二个被丢弃
前端路由（Vue Router / React Router v6+）不读 document.baseURI
<base href="/admin/"> 不会让 Vue Router 自动识别子路径，router.push('/home') 仍跳到 https://example.com/home，而非 /admin/home。这是最常被误信的“自动同步”陷阱：
- Vue Router 必须显式传入
base: '/admin/'（createRouter({ base: '/admin/' })） - React Router v6+ 必须包裹
<router basename="/admin"></router> - 漏配任一，就会出现“资源加载走
/admin/js/app.js，点击链接却跳到根路径”的割裂行为
构建工具 publicPath / base 配置与手写
Vite 的 build.base、Webpack 的 publicPath 和手写的 <base href="/a/b/c/"> 若值相同，会导致资源路径被拼两次：
- 预期请求：
/a/b/c/js/app.js - 实际请求：
/a/b/c//a/b/c/js/app.js（中间双斜杠）→ 404 - Service Worker 预缓存失败、微前端子应用 chunk 加载中断
更稳妥的做法是二选一：
- 仅靠构建工具控制前缀（如 Vite 设
build.base = "/a/b/c/"），HTML 中不写<base> - 或仅靠
<base>控制静态资源，构建工具设publicPath: ""（空字符串）避免叠加
最容易被忽略的是：JS 中的 fetch('./api')、import('./utils')、CSS 中的 @import 和 srcset 全部绕过 <base>，它们各自按自身规则解析路径——别指望一个 <base> 能统一所有场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
