<base>标签必须置于<head>最前且唯一，href须为绝对URL或根相对路径（如/myapp/），否则静默失效导致资源404；它仅重置HTML解析阶段的相对URL基准，不影响JS/CSS运行时路径及前端路由。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器对 <base> 的 href 值校验极严：只要不是以 http://、https://、// 或 / 开头，整条标签就被丢弃——控制台不报错、不警告，但所有 <img src="logo.png">、<script src="app.js"> 都退回到按当前页面 URL 解析，上线后批量 404。
常见无效写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..，规范禁止） -
href="/myapp"（结尾没斜杠，Firefox/Opera 会截断成/myappcss/app.css） -
href="%PUBLIC_URL%/"（构建未替换，浏览器收到字面量字符串）
真正合法的只有两种形式：
-
href="/myapp/"：根相对路径，开头必须是/，结尾必须带/ -
href="https://cdn.example.com/v3/"：绝对 URL，协议、域名、路径全明确
base 标签必须放在 <head> 最顶部且唯一
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 <head> 中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
-
<body><base href="/static/"></body>→ 被忽略 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. -
<head><title>My App</title><base href="/myapp/"></head>→<title>在前，<base>失效
正确顺序应为：
<head> <base href="/myapp/"> <title>My App</title> <link href="style.css"> <script src="app.js"></script> </head>
前端路由（Vue Router / React Router）不读 document.baseURI
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不依赖 document.baseURI，必须显式配置 base 或 basename，否则导航和资源加载行为割裂。
后果很直接：
- HTML 写了
<base href="/admin/">，但 Vue Router 没设base: '/admin/'→router.push('/home')跳到https://example.com/home，而非/admin/home -
<img src="logo.png">加载/admin/logo.png，但点击<a href="/home">却跳到根路径
对应配置必须严格对齐：
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<Router basename="/admin"> - Vite：
build.base = '/admin/'
构建工具 publicPath/base 与手写 <base> 混用会引发双斜杠
Webpack 的 publicPath 或 Vite 的 build.base 若与 HTML 中手写的 <base href="/myapp/"> 值相同，会导致资源路径被拼两次。
例如预期加载 /myapp/js/app.js，实际请求变成 /myapp//myapp/js/app.js（中间两个 //），结果静态资源 404，Service Worker 预缓存失败，微前端子应用 chunk 加载中断。
更稳妥的做法是二选一：
- 只用构建工具统一控制资源前缀（如 Vite 设
build.base = "/myapp/"），HTML 中不写<base> - 仅用
<base>控制静态资源，构建工具设publicPath: ""（空字符串），避免叠加
特别注意：Vite 构建生成的 HTML 通常已注入正确路径，手动再加 <base> 属于冗余操作，反而引入冲突风险。
