base 标签仅在 HTML 解析时重写纯相对路径，不作用于 JS 运行时（如 fetch/import）、CSS @import 或前端路由；href 值必须以 http://、https://、// 或 / 开头且结尾带 /，否则静默失效；SPA 需同步配置路由 base 参数，锚点跳转会因 base 变更路径导致重载，须手动处理。
base 标签不是“路径开关”，设了不等于全站路径自动对齐；它只在 HTML 解析那一刻重写纯相对路径（如 src="app.js"），写错 href 值、放错位置、或和 JS 运行时行为混用，资源 404 和锚点跳转异常就是常态。
base href 值写错就等于没写，且浏览器不报错
浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他形式一律静默丢弃——控制台零提示，但所有 <img src="logo.png"> 都退回到按当前页面 URL 解析，上线后批量 404。
-
<base href="assets/">❌ 缺协议和根斜杠，无效 -
<base href="../static/">❌ 含..，被忽略 -
<base href="https://example.com">❌ 结尾无/，Firefox 可能截断成https://example.comcss/ -
<base href="https://cdn.example.com/v3/">✅ 推荐用于 CDN 场景 -
<base href="/myapp/">✅ 根相对路径，结尾斜杠不可省
base 只影响 HTML 解析阶段，fetch/import 等完全不受控
这是最容易被误判的盲区：<base> 不是运行时代理，它只改写 HTML 中纯相对路径的初始拼接逻辑。JS 里写的 fetch('./api/user')、import('./utils.js')、CSS 里的 @import "reset.css" 全部绕过 base，仍以模块自身位置或当前页面 URL 为基准。
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js">、<link href="style.css">、CSS 文件中background: url(avatar.jpg)（注意：这是 HTML 加载 CSS 时解析的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/frame.html">、<img srcset="logo-2x.png 2x">
SPA 部署子路径时，base 和前端路由必须显式配对
<base href="/admin/"> 不会让 Vue Router 自动识别子路径，它根本不读 document.baseURI。只设 base 标签，不配路由的 base 参数，就会出现：资源加载正常（app.js 能加载），但 router.push('/home') 却跳到根路径，行为割裂。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- Vue Router：必须显式传
createRouter({ base: '/admin/' }) - React Router v6+：
<Router basename="/admin"> - Vite 构建时若已设
build.base = '/admin/'，HTML 中再手动加<base href="/admin/">属于冗余，可能引发双斜杠（如/admin//admin/js/app.js） - Webpack 的
publicPath若与手写<base>值相同，也会导致路径拼接重复
锚点跳转 href="#section2" 在 base 下会意外重载页面
存在 <base href="/myapp/"> 时，href="#section2" 会被浏览器解析为 /myapp/#section2，路径变更触发整页重载或 SPA 路由失效——这不是 bug，是规范行为。
- 原生锚点默认行为不可靠，必须拦截：
event.preventDefault()+ 手动element.scrollIntoView() - 避免字符串拼接：
href={window.location.pathname + "#section2"}或new URL("#section2", document.baseURI).href（后者正确忽略 base 对 hash 的干扰） - 首次加载带 hash（如
/page#faq）时，需手动检查location.hash并调用scrollIntoView()，因为路由初始化可能早于 DOM 渲染
真正麻烦的从来不是 base 本身，而是它只管 HTML 解析这一瞬，却要和构建工具、前端路由、Service Worker、CDN 缓存全部对齐——漏掉一个环节，资源加载或跳转行为就出错，而且往往没有明显报错。
