base href 值必须以 http://、https://、// 或 / 开头且格式严格，否则被静默丢弃导致相对资源批量 404；仅首个位于 head 开头的 base 标签生效；其作用范围限于 html 中硬编码的纯相对路径，不干预 js/css 内部路径或路由行为。
base href 值不合法导致所有相对资源 404
浏览器对 <base> 的 href 值校验极严：只要不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台无提示，Network 面板里请求路径看起来“正常”，但实际全部按当前页面 URL 解析，批量 404 就这么来了。
常见非法写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..，规范禁止） -
href="/myapp（结尾缺/，Firefox/Opera 会截断成/myappcss/app.css） -
href="%PUBLIC_URL%/"（构建未替换时就是字面量，直接失效）
真正合法的只有两种形式：
-
href="/myapp/"：根相对路径，开头和结尾都必须是/ -
href="https://cdn.example.com/v3/"：绝对 URL，协议+域名+路径全明确，推荐用于 CDN 场景
base 标签位置错、重复或动态插入完全无效
<base> 只在 HTML 解析阶段起作用，它影响的是后续所有相对 URL 的初始解析逻辑。顺序错了、放错位置、或者动态插入，等于没写。
典型问题：
-
<title>Page</title> <base href="/app/">→<title></title>已在<base>前解析，且若之前还有<link>，它已按原始 URL 加载完毕 - 多个
<base>：仅第一个生效，其余被静默丢弃；SSR 模板拼接或组件内动态注入极易触发 - 写在
里：浏览器直接忽略，不报错也不警告 -
document.head.appendChild(baseEl)：解析阶段早已结束，运行时插入毫无意义
正确做法：用 Ctrl+U 查看 HTML 源码，确认 <base> 是 中第一个元数据标签，且全文只出现一次。
base 和前端路由 / 构建配置不一致引发行为割裂
<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们根本不读 document.baseURI。只配一个，另一个大概率出问题。
后果很具体：
-
<base href="/admin/">有了，但 Vue Router 没设base: '/admin/'→router.push('/home')跳到https://example.com/home，而非/admin/home - Vite 已设
build.base: '/admin/'，HTML 再手动加<base href="/admin/">→ 资源路径被拼两次，如请求/admin//admin/js/app.js，404 - Webpack
publicPath: '/'却配了<base href="/admin/">→ chunk 加载地址是/admin/xxx.js，但文件实际在/xxx.js，照样 404
关键原则：SPA 部署子路径时，<base href>、路由 base 配置、构建工具 base 或 publicPath 必须严格一致，且避免重复设置。
误以为 base 能控制 JS/CSS 内部路径
<base> 只影响 HTML 属性中硬编码的纯相对路径（既无协议、也无 / 开头），它不是全局 URL 重写器，更不穿透到运行时。
明确不受控的场景：
-
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js') - CSS 文件内的
@import "reset.css"或background: url(avatar.jpg)（注意：后者是 CSS 文件自身位置为基准，不是 HTML 的<base>） -
<iframe src="/frame.html"></iframe>（以/开头，属根相对，绕过<base>）
唯一能间接利用它的场景是：new URL('data.json', document.baseURI)，但 window.location 和 history.pushState() 的相对路径仍以当前页面 URL 为准。
最易忽略的点：你以为加了 <base> 就万事大吉，其实它只管 HTML 里那几类属性；JS 和 CSS 的路径管理，得靠模块系统、构建配置或显式构造，不能指望它兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
