base标签不推荐使用，因其仅影响HTML解析时的相对路径，却与现代前端框架依赖的JS运行时路径逻辑根本冲突，导致路由、资源加载、锚点跳转等多处失效。
base 标签在现代前端框架中不推荐，不是因为它“过时”，而是它和框架运行机制存在**根本性冲突**：它只改 HTML 解析阶段的相对路径，却对 JS 运行时行为完全无感，而现代框架恰恰重度依赖后者。
Vue/React Router 的 base 配置和 base 标签互不识别
框架路由（如 Vue Router 的 createRouter({ base: '/admin/' }) 或 React Router 的 <Router basename="/admin">）压根不读 document.baseURI。它们各自维护一套路径逻辑，和 HTML 的 <base href="/admin/"> 完全无关。
- 如果只写 HTML 的
<base href="/admin/">，但没配路由的base，router.push('/home')会跳到https://example.com/home，而不是预期的/admin/home - 如果只配了路由
base，但没写 HTML 的<base>，<img src="logo.png">仍可能从根路径加载，导致 404 - 两者都配且值不一致（比如一个写
/admin/，另一个写/admin），轻则白屏，重则 hydration 失败
fetch、import()、@import 全部绕过 base
base 只影响 HTML 解析时的纯相对路径（如 <script src="app.js">），对 JS/CSS 运行时构造的 URL 毫无作用：
-
fetch('./api/user')始终以当前页面 URL 为基准，不是document.baseURI -
import('./utils.js')和new Worker('./worker.js')同样无视base - CSS 中的
@import "reset.css"或background: url(avatar.jpg)—— 后者虽在 CSS 文件里，但解析发生在 HTML 加载该 CSS 时，仍受base影响；而@import是 CSS 引擎自己 resolve，不受控
构建工具（Vite/Webpack）和 base 标签重复叠加会炸出双斜杠
Vite 的 build.base 或 Webpack 的 publicPath 会在打包时重写所有静态资源路径（如 js/app.js → /admin/js/app.js）。此时若 HTML 还手动加了 <base href="/admin/">，浏览器二次解析就会拼出 /admin//admin/js/app.js —— 中间两个 // 导致服务端 404。
- Vite 用户应直接设
base: '/admin/'，然后彻底删掉 HTML 中的<base> - Webpack 用户同理，用
publicPath: '/admin/'，不要在模板里补<base> - CDN 场景除外：若需把资源指向外部域名（如
https://cdn.example.com/v3/），才考虑用<base href="https://cdn.example.com/v3/">，且确保 JS/CSS 不依赖它做路径计算
锚点跳转（href="#section"）在 base 下直接失效
这是最隐蔽也最容易被忽略的问题：<base href="/subapp/"> 会让 <a href="#faq"> 被解析成 /subapp/#faq，触发一次无意义的页面重载（地址栏变灰、滚动回顶、SPA 路由不响应）。
立即学习“前端免费学习笔记（深入）”；
- 原生锚点跳转默认行为不可靠，必须显式拦截：
event.preventDefault()+document.getElementById('faq').scrollIntoView() - 或者动态生成绝对 fragment URL：
href={window.location.pathname + '#faq'}（React）或:href="location.pathname + '#faq'"（Vue） - 千万别用
href="#faq"+base组合，这不是 bug，是规范强制行为
base”，而是意识到：它只是一把单向的、静态的、仅作用于 HTML 初始解析的“扳手”，而现代前端是一个多层动态系统。一旦把它当成“全局路径开关”，几乎必然在某一层崩出意料之外的路径错位。 
