<base>标签href属性不生效是因为浏览器静默丢弃非法值，仅接受以/开头的根相对路径或带协议且结尾含/的绝对URL，且必须置于<head>最顶部。
<base> 标签的 href 属性不生效，几乎总是因为浏览器直接静默丢弃了整条标签——它不会报错、不发警告、Network 里也看不出异常，但所有相对路径都按原始页面 URL 解析，结果就是批量 404。
href 值非法：浏览器直接忽略，不校验也不提示
浏览器只接受两种格式的 href 值，其他一律丢弃：
-
https://cdn.example.com/v3/（绝对 URL，协议 + 域名 + 路径，结尾必须带/） -
/myapp/（根相对路径，开头和结尾都必须是/）
以下写法全部无效，<base> 形同虚设：
-
assets/、../static/、subapp/→ 不以/、http://、https://或//开头 -
/myapp→ 缺结尾斜杠，Firefox/Opera 会截断成/myappcss/，导致路径错乱 -
%PUBLIC_URL%/→ 构建未替换时是字面量字符串，浏览器不识别
base 标签位置或数量错误：解析阶段已过，补救无效
<base> 只在 HTML 解析阶段起作用，且仅影响它之后出现的相对 URL：
立即学习“前端免费学习笔记（深入）”；
- 必须放在
<head>最顶部，早于<title>、<link>、<script>等所有标签 - 写在
<body>里？浏览器直接忽略 - 多个
<base>？只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild(baseEl)）？解析早已完成，完全无效
哪些路径真受影响，哪些根本不管
很多人误以为 <base> 是“全局路径前缀”，其实它只在 HTML 解析时重写纯相对路径（既无协议、也无 / 开头）的属性值：
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、CSS 文件中background: url(icon.svg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受控：
<img src="/static/logo.png">（根相对路径）、fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、Vue 中:src="require('./logo.png')" - ⚠️ 特别注意：
<a href="#">会被拼成/myapp/#，触发页面重载而非锚点滚动；<img srcset="logo-2x.png 2x">中每个路径都受解析，但混写绝对/相对易漏配
SPA 部署子路径时，base 和路由配置必须字面量对齐
Vue Router 的 createWebHistory('/subpath/') 和 <base href="/subpath/"> 是两套独立机制，互不读取、互不校验：
- 只配路由 base，没配 HTML
<base>→ chunk 加载 404 - 只配
<base>，没配路由 base →router.push('/home')跳到根路径，白屏 - 两者都配但值不同（如
/subpath/vs/subpath）→ 路径错位，跳转或资源加载失败 - Vite 已设
build.base: '/subpath/'，HTML 再手动加<base>→ 资源路径被拼两次，变成/subpath//subpath/js/app.js
最隐蔽的坑是：锚点链接 <a href="#section2"> 点击后页面刷新、滚动重置——你根本看不出 <base> 在捣鬼，因为它不报错，只默默把 #section2 解析成新 URL 并重载。
