标签重置html解析器对后续相对url的基准起点,非简单加前缀;必须置于最前且唯一,href须为绝对url或根相对路径(结尾带斜杠),否则静默失效致404。

<base> 标签不是“加前缀”,而是重置 HTML 解析器对后续所有相对 URL 的基准起点——设错一个字符,<img src="logo.png"> 就 404,且浏览器静默忽略、控制台不报错。
base href 必须是绝对 URL 或根相对路径(结尾带斜杠)
浏览器只识别以 https://、http://、// 或 / 开头的 href 值,其余一律丢弃。常见无效写法包括:href="assets/"(缺协议和根路径)、href="../static/"(含 ..)、href="/myapp"(结尾没斜杠,Firefox 会截断成 /myappcss/)。
- ✅ 推荐:
href="https://cdn.example.com/v3/"(绝对 URL,部署可控) - ✅ 合法:
href="/myapp/"(根相对路径,必须以/开头且结尾带/) - ✅ 可用:
href="//cdn.example.com/v3/"(协议相对,自动继承当前协议) - ❌ 无效:
href="%PUBLIC_URL%/"(构建未替换就发到浏览器,字面量字符串不被识别)
base 标签必须放在 最顶部且唯一
<base> 的作用发生在 HTML 解析阶段,它只影响“之后出现”的相对 URL。放错位置等于没写。
- 必须早于
<title></title>、<link>、<script></script>等所有资源标签 - 禁止出现在
中(浏览器直接忽略,无提示) - 多个
<base>时,仅第一个生效,Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 禁止用 JS 动态插入:
document.head.appendChild(baseEl)—— 已解析的<img src="x">不会重算,只影响之后新创建的元素
哪些属性真受影响,哪些完全不管
<base> 只在 HTML 解析阶段起作用,不是运行时代理,也不是全局路径重写器。
- ✅ 明确受影响(HTML 属性中硬编码的纯相对路径):
<img src="avatar.jpg">、<script src="main.js"></script>、<link href="theme.css">、CSS 中的background: url(icon.png)(注意:这是 HTML 解析时拼接的,非 CSS 引擎运行时 resolve) - ❌ 完全不受影响(JS/CSS 运行时路径):
fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js')、<iframe src="page.html"></iframe>(其src相对于 iframe 当前 URL)
SPA 部署子路径时 base 与构建配置必须严格对齐
Vue Router 的 createWebHistory('/myapp/')、Vite 的 build.base: '/myapp/'、Webpack 的 publicPath,必须和 <base href="/myapp/"> 保持一致。否则会出现路径重复(如 /myapp//myapp/assets/index.js)或资源 404。
- 若构建已配
build.base: '/myapp/',HTML 中再手动加<base href="/myapp/">,大概率导致双拼 -
document.baseURI可用于构造运行时 URL:new URL('api/user', document.baseURI),但window.location和document.URL完全不变 - SEO 相关链接(如
<link rel="canonical">)必须写绝对路径,<base>不影响它们
最危险的坑是:href 值非法导致整个 <base> 被静默丢弃,所有相对路径退回到按当前页面 URL 解析——上线后批量 404,却查不到任何错误提示。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











