base href非法导致相对资源404：仅合法格式为绝对url（如https://cdn.example.com/v3/）或根相对路径（如/myapp/），且必须置于head内首个元数据标签位置、唯一存在。
base href 值非法导致所有相对资源 404
浏览器对 <base href> 的校验是“全有或全无”：只要值不以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际全部按当前页面 URL 解析，批量 404。
常见非法写法包括：
-
assets/（缺协议和根斜杠） -
../static/（含..，规范禁止） -
subapp/（非根相对，也不带协议） -
/myapp（结尾缺/，Firefox/Opera 会把css/app.css拼成/myappcss/app.css） -
%PUBLIC_URL%/（构建未替换时就是字面量，非法）
真正合法的只有两种形式：/myapp/（根相对，开头结尾都必须是 /）、https://cdn.example.com/v3/（绝对 URL，结尾必须带 /）。
base 标签位置错或重复导致部分资源失效
<base> 必须是 中第一个元数据标签，且全文只能出现一次；否则它只对“它之后出现的标签”生效，前面的 <link>、<script></script> 已按原始 URL 解析完毕，<base> 对它们完全无效。
典型错误场景：
-
<title>Page</title> <base href="/app/">→<title></title>前没有<base>，且若之前已有<link>，它已解析完成 -
<base>写在里 → 浏览器直接忽略，不报错也不警告 - SSR 模板拼接时 header 和 page 各 render 一个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析阶段早已结束，完全无效
CSS 中 background: url() 看似加载失败但实际受 base 影响
<base href> 会影响 HTML 解析阶段加载 CSS 文件时的 background: url(avatar.jpg)，因为这个路径是在 HTML 加载 CSS 时解析的，不是 CSS 引擎运行时 resolve 的。
但以下情况完全不受控，容易误判为 base 导致的问题：
-
fetch('./api/user')—— JS 运行时路径，与document.baseURI无关 -
@import "reset.css"—— CSS @import 是 CSS 引擎自己解析，绕过 base -
import('./utils.js')—— ES 模块动态导入，运行时行为 -
<img srcset="logo-2x.png 2x">——srcset不受 base 影响
所以看到样式丢失，先确认是 <link href="style.css"> 本身 404，还是 CSS 里的 url() 加载失败——前者大概率是 base 失效，后者大概率是路径写错或服务器配置问题。
本地双击打开 HTML 文件时 base 完全不生效
用 file:// 协议双击打开 HTML 文件时，<base href> 依然会尝试解析，但多数浏览器在该协议下禁用跨源请求、不识别 MIME 类型、不支持服务端路径逻辑，导致 CSS/JS/字体加载失败，表现和 base 失效一模一样。
此时即使 <base href="/myapp/"> 合法且位置正确，也会：
- 触发
net::ERR_FILE_NOT_FOUND - 字体文件（
.woff2）被拒绝加载 -
background-image不显示 - 相对路径的
<link>和<script></script>全部失败
这不是 base 的问题，而是 file:// 协议限制。调试时务必改用本地 HTTP 服务：npx http-server 或 python3 -m http.server 8000。
最常被忽略的一点：base 标签只管 HTML 解析那一刻的硬编码相对路径，它既不修改 JS 运行时行为，也不干预前端路由逻辑。一旦你发现“资源加载对了但跳转错了”，基本可以断定是 Vue Router 或 React Router 的 base/basename 漏配，而不是 base 标签没写好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
