base href值不以/、http://、https://或//开头即被静默丢弃，导致所有纯相对路径（如src="logo.png"）按当前页面URL解析而批量404；合法写法仅限根相对路径（如"/myapp/"）或绝对URL（如"https://cdn.example.com/v3/"），且必须置于<head>最顶部、唯一存在。
base href 值不以 /、http://、https:// 或 // 开头就等于没写
浏览器对 <base> 的校验是“全有或全无”：只要 href 值不匹配这四种开头，整条标签被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际所有 src="logo.png" 都按当前页面 URL 拼接，上线后批量 404。
常见非法写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..） -
href="%PUBLIC_URL%/"（构建未替换，字面量发到浏览器） -
href="/myapp"（结尾缺/，Firefox/Opera 可能截断成/myappcss/）
合法写法只有两类：
-
href="/myapp/"（根相对路径，开头和结尾都必须是/） -
href="https://cdn.example.com/v3/"（绝对 URL，协议+域名+路径，结尾带/） -
href="//cdn.example.com/v3/"（协议相对，自动继承当前页 http/https）
base 标签必须在 <head> 最顶部且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，这个动作只在解析阶段生效，且只影响它之后出现的标签。
立即学习“前端免费学习笔记（深入）”；
典型错误包括：
-
<head><title>App</title><base href="/app/"></head>→<title>不受影响，但更重要的是：如果之前已有<link href="style.css">，它早已按原始 URL 解析完毕，<base>对它完全无效 -
<body><base href="/app/"></body>→ 浏览器直接忽略，不报错也不警告 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used.
正确顺序示例：
<head> <base href="/myapp/"> <title>My App</title> <link rel="stylesheet" href="main.css"> <script src="app.js"></script> </head>
哪些路径真受 base 影响，哪些根本不受控
<base> 不是全局路径代理器，它只在 HTML 解析阶段改写**纯相对路径**（即不以 /、: 或协议开头的字符串），对运行时行为毫无作用。
✅ 明确受影响（HTML 属性中硬编码的相对路径）：
<img src="logo.png"><script src="app.js"><link href="theme.css">- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响（JS/CSS 运行时路径）：
fetch('./api/user')import('./utils.js')@import "reset.css"new Worker('./worker.js')
特别注意：<base href="/cdn/"> 不会让 CSS 里的 url(logo.png) 自动变成 /cdn/logo.png——它根本不处理 CSS 内部路径，只处理 HTML 属性值。
SPA 部署子路径时，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/ - Webpack：
output.publicPath必须与<base href>值一致，否则资源路径被拼两次（如/admin//admin/js/app.js）导致 404
最易忽略的一点：构建工具的 publicPath 和手写 <base href> 混用，会引发双斜杠问题，Service Worker 预缓存失败，微前端子应用 chunk 加载中断。
