base href必须为以/开头且结尾带斜杠的根相对路径（如/admin/）或绝对URL，否则浏览器静默忽略；仅影响HTML中纯相对路径属性，不影响fetch、import等JS路径，且需与前端路由和构建工具配置对齐。
base href 必须匹配虚拟目录路径且结尾带斜杠
虚拟目录（如 /admin/、/preview/v2/）不是普通子文件夹，它本质是 Web 服务器映射出的独立路径上下文。浏览器解析 <base href="/admin/"> 时，只认以 / 开头 + 结尾带 / 的根相对路径；写成 /admin（缺斜杠）或 admin/（没开头斜杠）都会被静默忽略，所有 src="js/app.js" 全部退回到按当前页面 URL 解析——本地调试看似正常，一上预览环境就批量 404。
常见错误现象：document.baseURI 返回的是当前页面地址而非你写的值，说明 <base> 已失效。
-
/admin/✅ 合法，Firefox/Chrome 都能正确拼接js/app.js → /admin/js/app.js -
/admin❌ 缺尾斜杠，Firefox 会截断为/admincss/类似行为，导致 CSS 路径错乱 -
admin/❌ 没开头斜杠，浏览器直接丢弃整条标签 -
https://example.com/admin/✅ 绝对 URL 更稳妥，尤其跨协议或 CDN 场景
base 标签必须放在 head 最顶部，且不能动态插入
虚拟目录下 HTML 文件往往由服务端模板或构建工具生成，容易在拼接时把 <base> 放到 <title> 或 <link> 后面。但浏览器是顺序解析的：如果 <link href="style.css"> 出现在 <base> 前，它就按原始页面路径解析，根本不受控。
典型翻车场景：Vue SSR 模板中 header 片段和 page 片段各自渲染一个 <base>，Chrome 控制台会提示 Multiple base elements detected. Only the first one is used.，但第二个你根本看不到。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：
<head><base href="/admin/"><title>...</title><link href="style.css"></head> - 绝对禁止：
<body><base href="/admin/"></body>—— 浏览器直接忽略 - 禁止 JS 插入：
document.head.appendChild(baseEl)对已解析的资源无效，只影响后续新创建的 DOM 元素 - 服务端模板中检查是否条件渲染导致重复或遗漏，比如
v-if="isPreview" <base href="/preview/">和全局 base 冲突
虚拟目录调试时要分清哪些路径受 base 控制
很多人以为加了 <base href="/admin/"> 就万事大吉，结果 fetch('./api/data') 还是发到 /api/data，JS 里的 import('./utils') 加载失败。这是因为 <base> 只在 HTML 解析阶段起作用，且仅影响纯相对路径（不以 /、: 或协议开头）的静态属性值。
- ✅ 真正受影响：
<img src="logo.png">→/admin/logo.png，<script src="app.js">→/admin/app.js，CSS 中background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/data')、import('./utils.js')、@import "reset.css"、<iframe src="frame.html">（它的src相对于 iframe 当前 URL） - ⚠️ 半受影响：
document.baseURI返回/admin/，可用于new URL('data.json', document.baseURI)，但window.location和document.URL完全不变
SPA 部署在虚拟目录时，base 标签和前端路由必须手动对齐
Vue Router 或 React Router v6+ 不会读取 document.baseURI，它们的 base 配置项和 HTML 的 <base href> 是两套完全独立的机制。只配一个，另一个必出问题：资源加载靠 <base>，路由跳转却往根路径走，或者反过来。
更隐蔽的问题是构建工具（如 Vite 的 base 配置、Webpack 的 publicPath）若和 HTML 中手写的 <base> 值一致，可能导致路径被拼两次，比如 /admin//admin/js/app.js。
- Vue Router：
createRouter({ base: '/admin/' })，否则router.push('/home')会跳到/home而非/admin/home - React Router v6+：
<Router basename="/admin">，注意这里不带尾斜杠，和 HTML 的<base href="/admin/">不同 - Vite 构建时若已设
base: '/admin/'，HTML 模板里就不该再手动写<base>标签，否则重复 - Webpack 若用
HtmlWebpackPlugin，可通过templateParameters注入<base href="{{ publicPath }}">，确保值一致且合法
<base> 就一劳永逸，其实它只管 HTML 属性里的“裸相对路径”，JS/CSS 运行时、前端路由、构建产物路径、Service Worker 缓存策略……全都得单独对齐，漏掉任何一个环节，404 就在等你。 
