base标签必须置于head中且唯一，其href值须为绝对url或根相对路径，影响所有html相对url解析，但不影响javascript动态路径。
base 标签必须放在 head 中且只能有一个
HTML 中 <base> 标签生效的前提是它必须出现在 内，且整个文档里只能存在一个。如果写了多个，浏览器只取第一个，其余被忽略；如果误放到 里，多数浏览器会忽略它（W3C 明确要求其为 head 元素的子元素）。
常见错误：在模板中动态插入 <base href="/static/"> 时，没检查是否已有其他 <base>，导致路径解析错乱——比如图片 404、CSS 加载失败、<a href="logo.png"></a> 指向了错误域名。
- 用
document.querySelector('base')在控制台确认是否已存在 base - 服务端渲染或前端框架（如 Vue/React）中，避免在子组件里重复注入 base
- 若使用构建工具（Vite/Webpack），静态资源路径通常由打包配置统一处理，此时一般不需要手动加 base
href 属性值必须是绝对 URL 或根相对路径
<base href> 的值不能是普通相对路径（如 href="assets/"），否则浏览器会按当前页面 URL 解析，结果不可控。正确写法只有两种：
- 绝对 URL：
<base href="https://cdn.example.com/v2/"> - 根相对路径（以
/开头）：<base href="/app/v3/">
例如当前页面 URL 是 https://site.com/blog/post.html，设 <base href="static/">，那么 <img src="logo.png"> 实际请求的是 https://site.com/blog/static/logo.png——这通常不是你想要的。
base 会影响所有相对 URL，包括 link、script、img、a、form action
一旦设置了 <base href="/api/">，所有未带协议和域名的链接都会被重写，连 <a href="user/profile"></a> 都会指向 /api/user/profile，而不是你预期的页面内跳转路径。
典型踩坑场景：
- 单页应用（SPA）中用
<base href="/app/">，但路由用的是 hash 模式（#/home），这时<a href="#about"></a>反而会被解析成/app/#about，刷新后 404 -
<form action="submit"></form>提交到/app/submit而非同目录下的submit接口 - 内联 SVG 中的
<use href="#icon-home"></use>被当成外部资源请求，报 404（因为href在 SVG 上下文中也被 base 影响）
JavaScript 动态创建的 URL 不受 base 标签影响
<base> 只作用于 HTML 解析阶段的相对 URL，对 JS 里用字符串拼接、new URL()、location.href 等完全无效。比如：
const img = new Image(); img.src = 'avatar.jpg'; // 这个路径不走 base，而是相对于当前页面 URL
也就是说，base 和 JS 是两套独立的路径解析逻辑。如果你在 JS 中大量使用相对路径，别指望靠 base 统一管理——得靠构建时替换、环境变量或封装路径函数（如 resolvePath('img/logo.png')）。
真正容易被忽略的是：现代前端框架的静态资源引用（如 import './style.css'）根本不会经过 HTML base 处理，它们由模块打包器决定最终路径。base 只管 HTML 中那些“裸写”的相对地址。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
