base标签仅对纯相对路径生效，对含协议、//或/开头的url完全无效；合法href值仅限绝对url（如https://example.com/）或根相对路径（如/subapp/），其他写法被浏览器静默忽略。
base 标签对绝对路径（含协议、//、/ 开头）确实完全无效——这不是 bug，是规范行为。它只接管“纯相对路径”，其他一律绕过。
哪些 URL 会被 base 忽略？
浏览器在 HTML 解析阶段会直接跳过以下写法，不作任何拼接：
-
<img src="https://cdn.com/logo.png?x-oss-process=image/resize,p_40">—— 含协议，走原始地址 -
<script src="//unpkg.com/react@18"></script>—— 协议相对，不依赖base -
<link href="/css/main.css">—— 根相对路径，直接拼到当前 origin -
<iframe src="/admin/frame.html"></iframe>—— 同上，base不介入
为什么 base href 不能写成 assets/ 或 ../static/？
这类值不是“无效配置”，而是被浏览器静默丢弃——<base href="assets/"> 等同于没写，后续所有相对路径仍按当前页面 URL 解析，404 风险陡增且无控制台提示。
- 合法值只有两种：
href="https://example.com/subapp/"（绝对 URL）或href="/subapp/"（根相对，必须以/开头且结尾带/） -
href="/subapp"少了末尾/：Firefox/Opera 会把css/app.css拼成/subappcss/app.css -
href="../assets/"含..：规范禁止，直接忽略
base 影响的属性有哪些？哪些常被误认为受控？
它只作用于 HTML 解析时的硬编码资源定位属性，且仅限相对路径：
- ✅ 真正生效：
<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件内background: url(icon.svg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve） - ❌ 完全不受控：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<picture><source srcset="logo-2x.png 2x"></source></picture>
CSS 中的 url() 是相对于 CSS 文件自身位置解析的，和 base 无关；JS 运行时构造的路径（如 new URL('data.json', document.baseURI)）虽可读取 document.baseURI，但不会自动改写 fetch 行为。
部署子路径 SPA 时最易踩的坑
当应用部署在 https://example.com/a/b/c/ 时，base 和框架配置必须严格对齐：
- Vue Router / React Router v6+ 必须显式设
base: '/a/b/c/'，否则router.push('/home')会跳到根路径 - Webpack 的
publicPath和<base href="/a/b/c/">若同时配置且值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时若已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位
真正关键的不是“要不要用 base”，而是确认它是否被浏览器实际采纳——检查 document.baseURI 的返回值，比看标签是否存在更可靠。很多线上问题，根源在于 href 值非法导致标签被静默忽略，却没人验证结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
