标签仅接受以/、http://、https://或//开头的href值;含..、无协议且不以/开头的值(如assets/、../static/)会被浏览器静默丢弃,导致相对路径资源404。

<base> 标签在子目录部署时,只要 href 值不是以 / 开头且结尾带 /,或者不是完整绝对 URL,就会被浏览器静默丢弃——不报错、不警告,但所有 <img src="logo.png"> 全部 404。
为什么 <base href="assets/"> 和 <base href="../static/"> 都无效
浏览器只接受四种开头的 href 值:http://、https://、// 或 /。任何含 ..、不含协议、也不以根斜杠开头的写法,整条 <base> 都被跳过。
-
<base href="assets/">→ 被忽略,<script src="app.js"></script>仍按当前页面 URL 解析(比如/a/b/c/index.html下请求/a/b/c/app.js) -
<base href="../static/">→ 含..,规范禁止,直接丢弃 -
<base href="/subapp">→ 缺末尾/,Firefox/Opera 会把css/app.css拼成/subappcss/app.css(路径截断) - 真正有效的只有:
<base href="/subapp/">或<base href="https://cdn.example.com/subapp/">
<base> 不会让 Vue Router / React Router 自动识别子路径
document.baseURI 和前端路由是两套完全隔离的机制。Vue Router 的 createRouter({ base: '/subapp/' }) 和 React Router v6+ 的 <router basename="/subapp"></router> 必须显式配置,否则:
-
<base href="/subapp/">生效了 →<img src="logo.png">加载/subapp/logo.png - 但没配路由
base→router.push('/home')实际跳转到/home(根路径),而非/subapp/home - 结果:资源能加载,页面却白屏或跳错
Webpack/Vite 的 publicPath 或 base 与 HTML 中手写 <base> 冲突
构建工具已经通过 publicPath: '/subapp/'(Webpack)或 build.base: '/subapp/'(Vite)控制了 JS/CSS 资源前缀,此时再在 HTML 中手动加 <base href="/subapp/">,会导致路径叠加:
- 预期请求:
/subapp/js/app.js - 实际请求:
/subapp//subapp/js/app.js(双斜杠)→ 404 - Vite 场景下更明显:若
vite.config.ts已设base: '/subapp/',HTML 中就不该再写<base> - 微前端中尤其危险:子应用同时设了 Webpack
publicPath和 HTML<base>,可能变成/subapp/subapp/js/chunk.js
<base> 只影响 HTML 解析阶段的纯相对路径
它不是全局 URL 重写器,对运行时构造的路径毫无作用:
- ✅ 受控:
<img src="icon.png">、<link href="style.css">、CSS 文件中background: url(avatar.jpg)(注意:这是 HTML 加载 CSS 时解析的) - ❌ 不受控:
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/frame.html"></iframe> - ⚠️ 半受控:
new URL('data.json', document.baseURI)可用,但window.location、history.pushState()完全不受影响
最可靠的排查方式永远是打开 Network 面板,看失败请求的真实 URL 是什么——如果 <img src="logo.png"> 请求的是 https://example.com/logo.png,说明 <base> 没生效;如果请求的是 /subapp/logo.png 却 404,那大概率是后端没配好静态资源路由,而不是 <base> 写错了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











