base href值不合法即被浏览器静默丢弃，等同于未设置；必须以http://、https://、//或/开头且结尾带/才生效，否则所有相对路径均按当前页面url解析，引发批量404。
base href 值不合法就等于没写
浏览器对 <base> 的校验是“全有或全无”：只要 href 值不以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际全按当前页面 URL 解析，导致批量 404。
常见非法写法包括：
-
assets/（相对路径，被忽略） -
../static/（含..，规范禁止） -
%PUBLIC_URL%/（未被构建工具替换时就是字面量字符串） -
/myapp（结尾缺/，Firefox 会截断拼接）
真正有效的只有两种形式：
-
https://cdn.example.com/v3/（绝对 URL，结尾必须带/） -
/myapp/（根相对路径，开头和结尾都必须是/）
用 Ctrl+U 查看 HTML 源码，确认 <base> 是否位于 第一行，且全文仅出现一次。
哪些资源真受 base 影响，哪些完全绕过
<base> 只在 HTML 解析阶段起作用，只改写纯相对路径（即不以 /、: 或协议开头）的初始解析逻辑。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。
✅ 真正受影响的：
<img src="logo.png"><script src="app.js"></script><link href="style.css"><form action="submit.php"></form>- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响的：
fetch('./api/user')import('./utils.js')@import "reset.css"-
<iframe src="/admin/frame.html"></iframe>（根相对路径） <img srcset="logo-2x.png 2x">
⚠️ 半受影响：document.baseURI 会返回 <base href> 的值，可用于 new URL('data.json', document.baseURI)，但 window.location 和 document.URL 完全不变。
SPA 部署子路径时 base 和路由配置必须严格对齐
<base href="/a/b/c/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们完全不读 document.baseURI，必须手动传入 base 配置项。
典型割裂现象：
- HTML 中写了
<base href="/a/b/c/">，但路由没配base→router.push('/home')跳到https://example.com/home（而非/a/b/c/home） -
<img src="logo.png">却加载https://example.com/a/b/c/logo.png
对应配置必须显式一致：
- Vue Router：
createRouter({ base: '/a/b/c/' }) - React Router v6+：
<router basename="/a/b/c/"></router> - Webpack：
publicPath: '/a/b/c/'，且 HTML 中不应再手动加<base>（避免重复拼接） - Vite：
base: '/a/b/c/'已在构建时处理，HTML 中再加<base>属于风险叠加
动态插入、JS 导入、fetch 全部绕过 base
无论你设了 <base href="/v2/"> 还是 <base href="https://cdn.example.com/">，以下全部不受影响：
-
import('./utils.js')→ 以模块自身位置为基准 -
fetch('./api/user')→ 相对于当前页面 URL，不是base new Worker('./worker.js')-
document.createElement('script').src = 'app.js'（动态创建）
这是最容易被忽略的盲区：很多人以为配了 <base> 就一劳永逸，结果 fetch 报 404、动态 import 找不到模块，却还在反复检查 <base> 写得对不对。
真正要统一资源基准的场景，得靠构建配置（如 Vite 的 base、Webpack 的 publicPath）或运行时拼接（如 new URL('./data.json', import.meta.url)），而不是依赖 HTML 的 <base> 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
