标签直接接管html中所有相对url解析起点,仅对纯相对路径(如logo.png)生效,必须为绝对url或根相对路径(以/开头且结尾带/),否则静默失效;影响img、script、link等标签及css url(),不影响fetch、import、@import等js/css运行时路径。

<base> 标签不是“辅助工具”,而是直接接管 HTML 中所有相对 URL 的解析起点——它一写上,<img src="logo.png">、<link href="style.css">、<a href="about.html"></a> 全部不再按当前页面 URL 推导路径,而是强行拼接成你指定的基准地址。
base href 必须是绝对 URL 或根相对路径,否则静默失效
浏览器只认以 http://、https://、// 或 / 开头的 href 值。其他写法一律被丢弃,且不报错、不警告:
-
<base href="static/">→ 缺协议和域名,整条标签被忽略 -
<base href="../assets/">→ 含..,直接跳过 -
<base href="https://example.com">→ 结尾没/,Firefox/Opera 会把css/app.css拼成https://example.comcss/app.css -
<base href="/subapp">→ 同样缺结尾斜杠,风险一致;正确应为/subapp/
生产环境推荐用完整绝对 URL:<base href="https://cdn.example.com/v2.3/">;本地开发可用 http://localhost:3000/,比 / 更少和后端路由冲突。
哪些资源受 base 影响,哪些完全不受
<base> 只在 HTML 解析阶段起作用,仅改写硬编码在标签属性里的相对路径:
- ✅ 受影响:
<img src="logo.png">、<script src="app.js"></script>、<link href="theme.css">、<form action="submit.php"></form>、CSS 中的background: url(avatar.jpg) - ❌ 完全不受:
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、CSS@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半受影响:
document.baseURI返回<base href>的值,可用于new URL('data.json', document.baseURI);但window.location和document.URL完全不变
SPA 部署在子路径时,base 和前端路由必须各自显式配置
<base href="/admin/"> 和 Vue Router 的 base: '/admin/' 是两套独立机制,不自动同步:
- 只设
<base>,没配 Vue Router 的base→router.push('/home')会跳到https://example.com/home,而不是/admin/home - 只配 Vue Router 的
base,没写<base>→chunk文件加载 404(script标签里的src还是按当前页 URL 解析) - Webpack 的
publicPath和<base href>值相同 → 资源路径可能被拼两次,比如/admin//admin/js/app.js
最易忽略的是:Vite 构建时若已设 base: '/admin/',HTML 中就不该再手动加 <base href="/admin/"> —— 重复配置会导致路径错乱,且问题只在部署后暴露。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











