<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（协议+域名+路径，结尾带/） -
//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"><form action="submit.php">- CSS 文件中
background: url(icon.svg)（注意：这是 HTML 加载 CSS 时解析的，不是 CSS 引擎自己 resolve）
❌ 完全不受控：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中
@import "reset.css" -
<img src="/admin/frame.html">（根相对路径，直接拼到当前域名）
如果fetch或import()出错，别怪<base>——它们压根不读这个标签。
排查<base>与前端路由、构建配置是否冲突
<base href="/subapp/">不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们完全不读document.baseURI，必须显式配置 base 参数。
- Vuex/Vue Router：需配
createRouter({ base: '/subapp/' })，否则router.push('/home')跳到/home而非/subapp/home - React Router v6+：
<Router basename="/subapp">，否则匹配和跳转全部错位 - Webpack：
publicPath: '/subapp/'与<base href="/subapp/">同时存在 → 资源路径被拼两次，如/subapp//subapp/js/app.js - Vite：
base: '/subapp/'已内置处理，HTML 中再手动加<base>属于重复生效，风险叠加
部署子路径时，<base href>、前端路由base、构建工具publicPath/base三者值必须严格一致，差一个字符就会引发“一半走 base、一半走根”的不可预测行为。
