base href值必须以http://、https://、//或/开头且结尾带/才生效，否则整条标签被静默丢弃；需置于<head>最前、唯一存在，仅影响其后HTML中纯相对路径资源，且须与前端路由及构建配置严格对齐。
检查base href值是否合法且生效
浏览器对<base href>的校验是“全有或全无”：只要值不以http://、https://、//或/开头，整条标签就被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际全按当前页面 URL 解析，导致批量 404。
常见非法写法包括：assets/、../static/、subapp/、%PUBLIC_URL%（未被构建替换时就是字面量）、/myapp（结尾缺斜杠）。
-
/myapp/✅ 合法根相对路径（开头和结尾都必须是/） -
https://cdn.example.com/v3/✅ 绝对 URL（协议+域名+路径，结尾带/） -
//cdn.example.com/v3/✅ 协议相对 URL（自动继承当前页 http/https）
打开浏览器开发者工具 → 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>只在 HTML 解析阶段起作用，只改写纯相对路径（既无协议、也无/开头）的硬编码属性。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。
✅ 真生效：<img src="logo.png">、<script src="app.js">、<link href="style.css">、CSS 文件里的background: url(icon.svg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受控：fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/frame.html">（以/开头）、<img srcset="logo-2x.png 2x">
打开 DevTools → Network → 刷新页面 → 看 JS/CSS/图片请求的发起 URL 是否符合你部署的实际路径。如果仍显示https://example.com/logo.png而非https://example.com/myapp/logo.png，说明<base>根本没生效。
排查前端路由与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：
build.base或base配置项设为/admin/
若构建工具（如 Vite/Webpack）已配置base或publicPath，再手动加<base href="/admin/">，极可能引发双斜杠（如/admin//admin/js/app.js）——这种问题在 Network 面板里一眼就能看到重复路径。
