base href必须是绝对url或以/开头且结尾带斜杠的根相对路径，否则标签被静默忽略；必须置于head最前且仅一个；仅影响html中纯相对路径的src/href/action等属性解析。
base href 必须是绝对 URL 或以 / 开头且结尾带斜杠的根相对路径
浏览器解析 <base> 时，只要 href 值不以 https://、http://、// 或 / 开头，整个标签就被静默忽略——控制台无报错，但所有 src="logo.png" 都退回到按当前页面 URL 解析，上线后批量 404。
常见无效写法：href="assets/"（缺协议和域名）、href="../static/"（含 ..）、href="/myapp"（结尾没斜杠，Firefox 会截断成 /myappcss/）。
-
href="https://cdn.example.com/v3/"：最稳妥，协议、域名、路径明确，适合 CDN 场景 -
href="/myapp/"：合法根相对路径，部署在子路径时首选，但结尾斜杠不能少 -
href="//cdn.example.com/v3/"：协议相对，自动继承当前页 http/https，适合混合协议环境
base 标签必须放在 最前面，且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，等于没写。
错误示例：<link href="main.css">
<base href="/app/"> → main.css 已解析完毕，不受控。
- 正确顺序：
<base href="/myapp/"> <title>App</title> <link href="style.css"> - 禁止放在
里——浏览器直接忽略，不警告也不报错 - 多个
<base>时，只有第一个生效；Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
哪些资源真受 base 影响，哪些完全不受
<base> 只在 HTML 解析阶段起作用，改写的是 src、href、action 等属性中**纯相对路径**（既无协议、也无 / 开头）的初始解析逻辑，不是运行时全局代理。
- ✅ 真受影响：
<img src="icon.svg">、<script src="bundle.js"></script>、<link href="theme.css">、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半影响：
document.baseURI会返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
SPA 部署时，base 标签和前端路由必须协同配置
Vue Router 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，不自动同步。只设一个，另一个大概率出问题。
- HTML
<base href="/myapp/">是为了让<script src="js/app.js"></script>正确加载，否则 chunk 404 - Vue Router / React Router v6+ 必须显式配置
base: '/myapp/'，否则router.push('/home')会跳到根路径 - 微前端场景下，子应用若同时设了 Webpack 的
publicPath和<base>，资源路径可能被拼两次，变成/myapp/myapp/js/app.js
最容易被忽略的是：构建工具（如 Vite、Webpack）默认可能已注入 <base href="/">，你再手动加一个，后者会被静默丢弃——控制台虽有提示，但多数人根本没看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
