base href 仅对纯相对路径生效，即不带协议、不以/开头、不含//的路径；其他如根相对、绝对url、js/css中路径均不受影响，且必须写在head最顶部、唯一、格式合法。
base href 只对纯相对路径生效，其他一概不管
浏览器解析 HTML 时，<base href="..."> 仅重写那些“不带协议、不以/开头、也不含//”的路径。它不是全局 URL 代理，而是非常窄的解析规则开关。
常见误判是看到 <img src="logo.png"> 被改了，就以为 fetch('./api') 或 @import "reset.css" 也会被改——完全不会。
-
<img src="logo.png">✅ 生效（纯相对） -
<script src="/js/app.js"></script>❌ 不生效（根相对，直接按当前 origin 解析） -
<img src="https://cdn.com/logo.png?x-oss-process=image/resize,p_40">❌ 不生效（绝对 URL） -
fetch('./data.json')❌ 不生效（JS 运行时，与 HTML 解析无关） -
@import "reset.css"❌ 不生效（CSS 引擎按 CSS 文件自身位置 resolve）
href 值写错 = 没写，且浏览器不报错
只要 href 值不以 http://、https://、// 或 / 开头，整个 <base> 标签就被静默丢弃。你不会在控制台看到任何提示，但所有相对路径仍按原始页面 URL 解析，上线后批量 404。
典型无效写法：
-
<base href="static/">→ 缺协议和根斜杠 -
<base href="../assets/">→ 含..，规范禁止 -
<base href="/myapp">→ 结尾没/，Firefox 可能截成/myappcss/
合法写法只有两类：
-
<base href="https://cdn.example.com/v3/">（推荐，部署可控） -
<base href="/myapp/">（根相对，结尾斜杠不可省）
base 必须放在 最顶部，且只能有一个
<base> 的作用时机是 HTML 自上而下解析的那一刻，它只影响其后出现的相对路径。放错位置或重复声明，等于白配。
- 放在
里 → 浏览器直接忽略 -
<title>...</title> <base href="/app/">→<title></title>已解析完毕，<base>对它无影响 - SSR 模板拼接时 header 和 page 各 render 一个 → 只有第一个生效，控制台可能提示
Multiple base elements detected. Only the first one is used. - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 已解析的<img src="x">不会重算，只影响之后新创建的元素
SPA 部署子路径时，base 标签只是拼图中的一块
单页应用部署到子路径（如 https://example.com/admin/）时，<base href="/admin/"> 解决的是 HTML 硬编码资源加载问题，但它和前端路由、构建配置是三套独立机制，缺一不可。
- 只设
<base href="/admin/">：JS chunk 加载正常，但router.push('/home')会跳到/home（根路径），不是/admin/home - 只设 Vue Router 的
base: '/admin/'：路由跳转正常，但<script src="index.js"></script>404（实际应在/admin/index.js） - Vite 的
build.base和 HTML 中的<base>若值相同，可能造成双拼：/admin//admin/js/app.js
真正麻烦的不是配置本身，而是构建产物、CDN 缓存、Service Worker 预缓存路径全部依赖这个前缀的一致性——漏掉一个环节，资源就加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
