base标签仅支持绝对url或根相对路径（以/开头且结尾带/），相对路径如"assets/"会静默失效；它只影响html解析阶段的资源加载，对js运行时路径、前端路由及css@import等无效；必须置于head内首个元数据标签位置，且不可重复。
base href 写成相对路径就直接失效
浏览器遇到 <base href="assets/"> 或 <base href="../static"> 这类写法，会静默丢弃整个标签——控制台零提示，但所有 <img src="logo.png">、<script src="app.js"></script> 全部退回到按当前页面 URL 解析，上线后批量 404。
真正有效的只有两种形式：
-
<base href="/myapp/">：根相对路径，开头必须是/，结尾必须带/（否则 Firefox/Opera 会把css/app.css拼成/myappcss/app.css） -
<base href="https://cdn.example.com/v3/">：绝对 URL，协议、域名、版本全明确，不依赖当前页上下文
前端路由和 base 标签完全不互通
<base href="/admin/"> 不会让 Vue Router 自动识别子路径，它根本不读 document.baseURI。如果你没手动配 base，router.push('/home') 就会跳到 https://example.com/home，而不是 /admin/home。
对应配置必须显式对齐：
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<router basename="/admin"></router> - Vite：
build.base或base配置项设为/admin/，此时 HTML 中再写<base href="/admin/">属于冗余，容易引发双斜杠（如/admin//admin/js/app.js）
JS/CSS 中的相对路径多数绕过 base 控制
<base> 只在 HTML 解析阶段生效，不影响运行时构造的 URL：
- ✅ 受控：
<img src="icon.png">、<link href="style.css">、CSS 文件里background: url(avatar.jpg)（注意：这是 HTML 加载 CSS 时解析的，不是 CSS 引擎自己 resolve） - ❌ 不受控：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/frame.html"></iframe>（以/开头） - ⚠️ 半受控：
new URL('data.json', document.baseURI)可用，但window.location和history.pushState()的相对路径仍以当前页面 URL 为准
base 标签位置错或重复就等于没写
<base> 必须是 中第一个元数据标签，放错位置或重复声明会直接失效：
- 错误示例：
<title>Page</title> <base href="/app/">——<title></title>前没有<base>，且之前若已有<link>，它已按原始 URL 解析完毕 - SSR 模板拼接时 header 和 page 各 render 一个
<base>，浏览器只认第一个，控制台可能提示Multiple base elements detected. Only the first one is used. - 本地开发建议用
<base href="http://localhost:3000/">而非<base href="/">，避免和后端路由冲突
base 或 publicPath 注入资源路径，再手动加 <base> 不仅多余，还可能让路径拼接出双斜杠；而 JS 里的 fetch 和动态 import() 从不看这个标签，它们的相对路径始终以模块自身位置为基准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
