子目录部署spa时，是资源加载不出错的底线配置，但必须与构建工具（如vite的build.base）、前端路由（如vue router的createwebhistory('/subpath/')）严格对齐，缺一即导致404或跳转错位；它仅影响html中纯相对路径（如src="logo.png"），不干预js动态请求、根路径或绝对路径。
子目录部署 SPA 时，<base href="/subpath/"> 不是可选项，而是资源加载不出错的底线配置——但它单独存在毫无意义，必须和构建工具、前端路由三者对齐，漏掉任何一个环节，就会出现静态资源 404 或路由跳转错位。
base 标签只在 HTML 解析阶段生效，且只改纯相对路径
<base> 的作用非常窄：它仅影响 HTML 文档解析过程中遇到的“纯相对路径”属性值，比如 <img src="logo.png">、<link href="style.css">、<form action="submit"></form>。这些路径原本会按当前 HTML 文件 URL 解析（如 https://example.com/a/b/c/index.html → 请求 https://example.com/a/b/c/logo.png），加了 <base href="/subpath/"> 后，就统一变成 https://example.com/subpath/logo.png。
以下情况它完全不干预：
-
fetch('./api')、import('./utils.js')—— JS 运行时路径由浏览器模块系统或 fetch API 自己 resolve -
<img src="/assets/icon.svg">—— 以/开头的根路径，直接拼域名，跳过<base> - CSS 中的
background: url(avatar.jpg)—— 注意：这个url()是 HTML 解析时计算的，所以受<base>影响；但@import "reset.css"不受影响 -
<iframe src="frame.html"></iframe>—— 纯相对路径才生效；src="/admin"或src="https://..."都绕过
href 值写错等于没写，浏览器静默忽略
几乎所有线上 404 都源于 <base> 的 href 写法非法。浏览器只要发现值不以 https://、http://、// 或 / 开头，就直接丢弃整条标签，控制台零提示。
常见无效写法：
-
href="static/"—— 相对路径，被忽略 -
href="../dist/"—— 含..，被忽略 -
href="/subpath"—— 缺尾部斜杠，Firefox 可能截断成/subpathcss/ -
href="%PUBLIC_URL%/"—— 构建未替换，发到浏览器就是字面量字符串，被忽略
✅ 正确写法只有两类：
-
href="/subpath/"—— 根相对路径，结尾必须带/ -
href="https://cdn.example.com/v3/"—— 绝对 URL，推荐用于 CDN 场景
必须和 Vue Router / React Router v6+ 的 base 配置配对
<base href="/subpath/"> 和前端路由的 base 是两套独立机制，互不读取对方值。只配一个，必然出问题：
- 只配 HTML
<base>：JS chunk 加载正常（script src="./index.js"被修正），但router.push('/home')仍跳到https://example.com/home，不是/subpath/home - 只配 Vue Router 的
createWebHistory('/subpath/')：路由跳转正常，但<script src="./index.js"></script>仍按当前 HTML URL 解析，请求/subpath/index.js，而实际文件在/index.js或/subpath/assets/index.js，404
React Router v6+ 同理，必须显式传入 basename="/subpath/"。
Vite / Webpack 构建配置与 HTML base 易重复拼接
构建工具本身就能控制资源前缀，比如 Vite 的 build.base: '/subpath/'，Webpack 的 output.publicPath: '/subpath/'。如果构建时已设好，再手动在 HTML 里加 <base href="/subpath/">，就可能触发双重拼接：
- Vite + 手动
<base>→/subpath//subpath/assets/index.js - Webpack +
<base>+publicPath: '/'→ runtime chunk 从/subpath/加载，但文件实际在/下，404
微前端场景更危险：publicPath、HTML <base>、子应用自身路由 base 三者若都设为 /subapp/，可能变成 /subapp/subapp/js/app.js。
✅ 推荐策略：优先用构建工具统一控管（如 Vite 的 build.base），HTML 中不手写 <base>；只有当构建无法介入（如后端模板渲染 HTML）时，才加 <base>，并确保路由和构建输出路径完全对齐。
真正麻烦的从来不是怎么写 <base>，而是 Service Worker 缓存规则、CDN 缓存键、后端 fallback 路由、甚至 DevTools Network 面板里看到的请求 URL，全都依赖这个前缀的一致性——某个环节用了 /subpath，另一个用了 /subpath/，或者某处忘了加斜杠，问题就藏在白屏或 404 背后，极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
