base标签仅在HTML解析时重写纯相对路径的拼接起点，必须以/、http://、https://或//开头且置于head顶部唯一存在，否则静默失效；它不影响JS动态加载等运行时路径。

base 标签不是“让所有路径自动加前缀”的开关，它只在 HTML 解析那一刻，重写纯相对路径（如 src="logo.png"）的拼接起点。写错、放错、或指望它管 JS 动态加载，都会静默失败——浏览器不报错，但资源全 404。

base href 值必须以 /、http://、https:// 或 // 开头，否则被静默丢弃

浏览器解析 <base href="static/"> 时，发现它既不是绝对 URL，也不以 / 开头，直接忽略整条标签。后续所有 <img src="icon.svg"> 仍按当前页面 URL 拼接，上线后批量 404。

• <base href="assets/"> ❌ 缺协议和根斜杠，无效
• <base href="../static/"> ❌ 含 ..，不被识别
• <base href="https://example.com/app"> ❌ 结尾无 /，Firefox 可能截断成 https://example.com/appcss/
• <base href="https://cdn.example.com/v3/"> ✅ 推荐，绝对 URL，CDN 场景最可控
• <base href="/myapp/"> ✅ 合法，根相对路径，结尾斜杠不可省

base 必须放在 最顶部，且只能有一个

base 的作用时机是 HTML 自上而下解析过程。它只影响其后出现的相对路径。放错位置或重复声明，等于没写。

• 塞进 <body> → 浏览器直接忽略，无提示
• <head><link href="main.css"><base href="/app/"></head> → main.css 已按原始页面 URL 解析完毕，<base> 对它完全无效
• SSR 模板拼接出两个 <base> → Chrome 控制台提示 Multiple base elements detected. Only the first one is used.，仅第一个生效
• 用 JS 动态插入：document.head.appendChild(baseEl) → 解析阶段早已结束，已创建的元素不会重算路径

哪些属性真受影响，哪些完全不管

base 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 真正受影响：<img src="icon.png">、<script src="app.js">、<link href="style.css">、<a href="about.html">、<form action="submit.php">、CSS 中的 background: url(avatar.jpg)（注意：这是 HTML 解析时计算的）
• ❌ 完全不受影响：fetch('./api/user')、import('./utils.js')、@import "reset.css"、new Worker('./worker.js')、<iframe src="/admin/frame.html">（根相对路径）、<img src="/absolute/path.png">

SPA 部署子路径时，base 标签只是拼图之一

只设 <base href="/subpath/">，JS chunk 加载正常，但 router.push('/home') 会跳到 /home（根路径），不是 /subpath/home；只设 Vue Router 的 base: '/subpath/'，路由跳转正常，但 <script src="index.js"> 404（实际应在 /subpath/index.js）。

• Webpack/Vite 构建需同步配置 publicPath 或 build.base，否则产出路径与 <base> 不一致
• Service Worker 预缓存路径、CDN 缓存键、甚至 document.baseURI 的返回值，都依赖这个前缀严格对齐
• 微前端场景下，子应用的 publicPath + 主应用的 <base href> + 路由 base 三者重复拼接，可能变成 /subpath/subpath/js/app.js

真正麻烦的不是写错一行 <base href="/app/">，而是构建产物、CDN 缓存、Service Worker、前端路由、甚至第三方 SDK 内部的路径推导，全部隐式依赖这个值的一致性——漏掉一个环节，就出现资源加载失败或路由错位，且往往没有明确报错。