base href必须是绝对URL或根相对路径，否则浏览器静默忽略；仅影响HTML解析阶段的纯相对路径（如img、script、link、a、CSS url()），不影响fetch、import、@import、srcset等运行时行为。
base href 必须是绝对 URL 或根相对路径，否则静默失效
浏览器遇到 <base href="assets/"> 这类写法，会直接跳过整个标签——不报错、不警告，但后续所有 <img src="logo.png"> 都按当前页面 URL 解析，404 风险极高。真正有效的只有两种形式：
-
href="https://cdn.example.com/v3/"（绝对 URL，推荐用于 CDN 场景） -
href="/myapp/"（根相对路径，结尾必须带/，否则 Firefox 会截断）
常见翻车点：href="../static/"、href="css/"、href="%PUBLIC_PATH%/"（未被构建工具替换时就是字面量字符串）全部无效。
哪些资源受 base 影响，哪些完全不受
<base> 只在 HTML 解析阶段起作用，改写的是纯相对路径（即不以 /、: 或协议开头）的初始解析逻辑。它不是全局代理，更不介入 JS/CSS 运行时行为。
✅ 真正受影响的：
立即学习“前端免费学习笔记（深入）”；
<img src="icon.png"><script src="app.js"><link href="style.css"><a href="about.html">- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响的：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
fetch('./api/user')、import('./utils.js') - CSS 中的
@import "reset.css" -
<iframe src="/admin/frame.html">（根相对路径，直接拼域名） -
<img srcset="logo-2x.png 2x">（srcset不走 base 规则）
多级目录部署时，base 和前端路由/构建工具容易冲突
SPA 部署在子路径（如 https://example.com/a/b/c/）时，<base href="/a/b/c/"> 和框架路由配置必须对齐，否则行为割裂：
- Vue Router / React Router v6+ 要显式传入
base: '/a/b/c/'，它们不读document.baseURI - Webpack 的
publicPath和 HTML 中手写的<base href="/a/b/c/">若同时存在且值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时若已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位
本地开发建议用 href="http://localhost:3000/" 而非 href="/"，避免和后端路由冲突；生产环境走 CDN 时，用完整绝对 URL 比根相对路径更可控。
base 标签必须放在 <head> 顶部且唯一
浏览器只认 <head> 内第一个 <base>，其余全被忽略。放到 <body> 里？直接失效，控制台可能连提示都没有。
容易踩坑的场景：
- 服务端模板拼接时，header 模板和页面模板各自 render 一个
<base>→ 只有第一个生效 - Vue/React 组件内动态插入
<base>→ DOM 已开始解析，后续资源不会重新 resolve - 多个
<base>共存 → 控制台提示Multiple base elements detected. Only the first one is used.
最稳妥的做法：在 HTML 源码中静态写死一个，放在 <head> 最顶部，且确保构建流程或 SSR 不会重复注入。
