base href写错会导致静态资源批量404且浏览器静默忽略；合法值仅两类：/subapp/（根相对路径）或https://cdn.example.com/subapp/（绝对URL）；构建工具已配base时勿手写，且router base、Service Worker scope等必须与之严格对齐。
base href 写错会导致静态资源批量 404，且浏览器不报错
构建工具（如 Vite、Webpack）打包后生成的 HTML 文件里如果手动加了 <base href="/subapp/">，但值写成 <base href="subapp/"> 或 <base href="../static/">，浏览器会静默忽略整条标签——它既不报错，也不警告，所有 src="app.js"、href="style.css" 仍按原始页面 URL 拼接，结果就是上线后大量资源 404。
真正合法的 href 值只有两类：/subapp/（根相对路径，开头和结尾都必须是 /）或 https://cdn.example.com/subapp/（绝对 URL）。漏掉结尾斜杠在 Firefox 中可能被截断为 /subappcss/，导致 CSS 路径错乱。
-
<base href="assets/">❌ 静默失效 -
<base href="/subapp">❌ Firefox 截断风险 -
<base href="/subapp/">✅ 安全，推荐用于子目录部署 -
<base href="https://cdn.example.com/subapp/">✅ 更可控，适合 CDN 场景
Vite / Webpack 的 build.base 和 HTML 中的 base 标签不能混用
如果你用 Vite，配置了 build.base: "/admin/"，它会在打包时自动重写所有静态资源引用（如 <script src="/admin/js/app.js">），并默认注入 <base href="/admin/"> 到 HTML。此时再手动在模板里加一条 <base href="/admin/">，就会触发浏览器“Multiple base elements detected”警告，只取第一个，第二个被丢弃——看似没影响，实则埋下维护隐患。
更危险的是双拼路径：Vite 已把 js/app.js 改成 /admin/js/app.js，HTML 又写了 <base href="/admin/">，浏览器再拼一次，最终请求变成 /admin//admin/js/app.js（中间两个 //），404。
立即学习“前端免费学习笔记（深入）”；
- 构建工具已配
base→ 不要手写<base> - 手写
<base>→ 关闭构建工具的自动注入（如 Vite 的build.rollupOptions.output.manualChunks不影响，但需查build.base是否设为""） - 检查最终 HTML 源码，确保
<base>只出现一次，且位置在<head>最顶部
base 标签对 CSS url() 有效，但对 @import 和 JS import 完全无效
很多人以为加了 <base href="/v2/"> 后，CSS 里的 @import "reset.css" 和 JS 里的 import('./utils.js') 也会被重定向，其实完全不会。它们各自按文件所在路径解析：@import 相对于 CSS 文件位置，import() 相对于模块自身 URL。
但 CSS 中的 background: url(logo.png) 是例外——它在 HTML 解析阶段就被 <base> 处理，等价于写死 <img src="logo.png">，所以会拼成 /v2/logo.png。这点容易混淆，尤其当 CSS 是通过 <link> 引入时，开发者误以为路径逻辑统一，结果动态加载的图片正常，而 CSS 背景图却 404。
-
background: url(logo.png)✅ 受<base>影响 -
@import "reset.css"❌ 不受影响，仍按 CSS 文件路径解析 -
fetch('./api/user')❌ 完全绕过<base> -
new URL('./data.json', document.baseURI)⚠️ 可主动利用，但需显式调用
SPA 部署到子路径时，router base 和 HTML base 必须严格对齐
Vue Router 的 createRouter({ base: '/admin/' }) 和 React Router 的 <Router basename="/admin"> 是运行时逻辑，和 HTML 的 <base href="/admin/"> 毫无关系。两者值不一致，就会出现「链接跳转错位 + 静态资源加载正确」的割裂现象：
比如 HTML 有 <base href="/admin/">，但 Vue Router 没设 base，那么 router.push('/home') 实际跳到 https://example.com/home，而非 /admin/home；而 <img src="logo.png"> 却能正确加载 /admin/logo.png。
- HTML
<base href="/admin/">→ 管静态资源路径 - Vue Router
base: '/admin/'→ 管路由导航和 history API - React Router
basename="/admin"→ 同上 - Service Worker 的
scope也得同步设为/admin/，否则预缓存失败
最易被忽略的是：所有这些配置项的值必须字面量完全一致，包括结尾斜杠。少一个 /，就可能让 Service Worker 拒绝注册，或让 router fallback 返回 404 页面。
