<base> href值必须以http://、https://、//或/开头且结尾带/才生效，否则整条标签被静默丢弃；仅影响HTML解析阶段的相对路径，且须位于<head>最前、唯一存在。
检查<base>的href值是否合法且生效
浏览器对<base href>的校验是“全有或全无”：只要值不以http://、https://、//或/开头，整条标签就被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际全按当前页面 URL 解析，导致批量 404。
常见非法写法包括：assets/、../static/、subapp/、%PUBLIC_URL%（未被构建替换时就是字面量）、/myapp（结尾缺斜杠）。
合法写法只有两类：
-
/myapp/✅ 根相对路径（开头和结尾都必须是/） -
https://cdn.example.com/v3/✅ 绝对 URL（协议+域名+路径，结尾带/）
打开浏览器开发者工具 → Elements 标签页 → 检查<head>最顶部是否存在<base>，并确认其href值符合上述任一格式。若值非法，它就等于没写。
立即学习“前端免费学习笔记（深入）”；
确认<base>位置和数量是否正确
<base>只对它之后出现的相对 URL 生效，且必须在<head>内、所有其他标签（包括<title>）之前；多个声明时仅第一个生效，其余被静默丢弃。
典型错误：
-
<head><link href="main.css"><base href="/app/"></head>→main.css已按原始页面 URL 解析完毕，<base>对它无效 -
<base>写在<body>里 → 浏览器直接忽略，不报错也不警告 - 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，完全无效
用 Ctrl+U 查看 HTML 源码，确认<base>是否位于<head>第一行，且全文仅出现一次。
区分哪些资源受<base>影响、哪些完全不受控
<base href>仅对 HTML 解析阶段的相对路径生效，JS/CSS 运行时路径（如 fetch()、import、@import）完全不受其控制。
这意味着：
-
<img src="logo.png">、<script src="app.js">、<link href="style.css">会受<base>影响 -
fetch('./api/data.json')仍按当前页面 URL 解析，不会跳到/myapp/api/data.json - CSS 中的
@import 'theme.css'或background: url(../img/bg.jpg)也完全无视<base>
这个边界非常关键：很多“样式丢失”其实是 CSS 文件本身加载成功了，但里面写的 url() 路径因未被 <base> 修正而 404，最终表现为背景图、字体、图标失效。
前端路由与<base>配置必须显式对齐
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们根本不读 document.baseURI，必须显式配置 base 参数，否则导航和资源加载行为割裂。
典型症状：
- HTML 中写了
<base href="/admin/">，但 Vue Router 没设base: '/admin/'→router.push('/home')跳到https://example.com/home，而非/admin/home -
<img src="logo.png">加载/admin/logo.png，但点击链接却跳到根路径，行为不一致
对应配置必须严格对齐：
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<Router basename="/admin"> - Vite：
base: '/admin/'（影响构建输出前缀，但不替代路由配置）
最容易被忽略的是：构建工具（如 Vite）的 base 配置只改资源路径前缀，它不会自动让前端路由“感知”该路径；两套配置各自独立，错一个就全乱。
