base href 必须是绝对 URL 或根相对路径（以/或协议开头且结尾含斜杠），否则浏览器静默忽略；它仅影响 HTML 中 src/href 等属性的相对路径解析，不影响 JS 运行时或 CSS @import。
base href 必须是绝对 URL 或根相对路径，否则浏览器静默忽略
浏览器只认 href 值以 https://、http://、// 或 / 开头的写法。其他任何形式——比如 assets/、../static/、%PUBLIC_URL%/、甚至 /myapp（结尾没斜杠）——整条 <base> 都会被丢弃，不报错也不警告，但所有 src="logo.png" 会退回到按当前页面 URL 解析，上线后批量 404。
常见有效配置：
-
https://cdn.example.com/v3/：最稳妥，协议、域名、路径明确，适合 CDN 场景 -
/myapp/：合法根相对路径，结尾斜杠不能少（/myapp在 Firefox 中可能被截成/myappcss/） -
//cdn.example.com/v3/：协议相对，自动继承当前页 http/https，适合多协议环境 -
http://localhost:3000/：本地开发时比/更安全，避免和后端路由冲突
不同服务器环境下的实际配置位置与时机
<base> 不是“部署时改个配置就行”的东西，它必须在 HTML 文档解析前就存在，且位置严格受限。
- 静态文件服务器（如 Nginx、Apache）：直接在 HTML 模板中硬编码
<base href="/subpath/">，确保它位于<head>最顶部，且在任何<link>或<script>之前 - 服务端渲染（SSR）或静态站点生成器（如 Hugo、Jekyll）：用模板变量注入，例如 Hugo 的
{{ .Site.BaseURL }}，但必须确认构建后输出的是真实值（如https://example.com/blog/），而非未解析的字符串%7B%7B%20.Site.BaseURL%20%7D%7D - 构建工具（Webpack/Vite）：通过插件（如
HtmlWebpackPlugin）在生成 HTML 时动态注入，依赖publicPath或assetPrefix配置；注意该值必须满足前述格式规范（以/或协议开头 + 结尾斜杠） - 禁止 JS 动态插入：
document.head.appendChild(baseEl)完全无效——已解析的<img src="x">不会重算，只影响之后新创建的元素
SPA 部署在子路径时，base 标签和前端路由必须各自独立配置
<base href="/subpath/"> 和 Vue Router 的 base: '/subpath/'（或 React Router v6+ 的 basename）是两套机制，互不感知。只配一个，另一个大概率出问题。
立即学习“前端免费学习笔记（深入）”；
-
<base href="/subpath/">是为让<script src="chunk.js">正确加载，否则打包后的资源请求路径变成/chunk.js而不是/subpath/chunk.js，直接 404 - Vue Router 的
base或 React Router 的basename是为让router.push('/home')解析成/subpath/home，而不是跳到根域/home - Service Worker 缓存策略若基于
self.location.origin + '/subpath/'，而 HTML 没配<base>，则预缓存路径错位，导致离线失败 - 微前端场景下，子应用若同时设了 Webpack 的
publicPath和<base href="/subpath/">，资源路径可能被拼两次，变成/subpath/subpath/js/app.js
CSS url() 和 JS 运行时路径不受 base 标签影响
这是最容易误判的一点：<base href="/cdn/"> 不会让 fetch('./api/data.json') 或 import('./utils.js') 自动带上前缀。它只作用于 HTML 解析阶段的属性值。
- ✅ 真受影响：
<img src="icon.svg">、<script src="bundle.js">、<link href="theme.css">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html"> - ⚠️ 半受影响：JS 中可读
document.baseURI构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
真正麻烦的从来不是怎么写 <base>，而是它生效的边界太窄——只管 HTML 解析那一刻的纯相对路径，既不穿透到 JS 运行时，也不覆盖 CSS 的 @import，还要求位置、格式、唯一性全部精准对齐。稍有偏差，就是静默 404，连控制台都懒得提醒你。
