base标签仅在html解析阶段生效，仅重写img、script、link等标签中纯相对路径（如logo.png）的解析基准，必须为绝对url或根相对路径（结尾带/），否则静默失效；不影响fetch、import、@import等运行时路径。

base 标签只在 HTML 解析阶段生效，不是全局 URL 重写器

它不改变 window.location、不干预 JS 运行时行为、也不影响 CSS 引擎对 @import 或 url() 的解析逻辑。它的作用窗口非常窄：仅限浏览器解析 HTML 文档时，对特定属性中「纯相对路径」做一次性的基准拼接。

常见误判是以为设了 <base href="/app/"> 就能“统一管理所有路径”——结果 fetch('./api') 仍按当前页面 URL 发请求，import('./utils.js') 依然从模块自身位置加载，CSS 里的 background: url(logo.png) 也照旧相对于 CSS 文件路径解析。

真正受控的只有那些硬编码在 HTML 标签属性里、且不含协议、不以 / 开头的值：

• <img src="icon.png"> → 拼成 /app/icon.png
• <script src="main.js"></script> → 拼成 /app/main.js
• <link href="style.css"> → 拼成 /app/style.css
• <form action="submit.php"></form> → 拼成 /app/submit.php
• <meta http-equiv="refresh" content="0;url=done.html"> → 跳转到 /app/done.html

href 值必须是绝对 URL 或根相对路径（结尾带 /）

写错 href 不会报错，而是被浏览器静默丢弃——你看到的全是 404，控制台却空空如也。

合法写法只有两类：

• <base href="https://cdn.example.com/v3/"> ✅ 推荐，CDN 场景最稳
• <base href="/myapp/"> ✅ 根相对，部署子路径时需同步改

以下全部无效：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• <base href="assets/"> ❌ 缺协议和根斜杠，被忽略
• <base href="../static/"> ❌ 含 ..，规范禁止
• <base href="https://example.com"> ❌ 结尾无 /，Firefox 可能截断为 https://example.comcss/app.css

放错位置或重复声明等于没写

<base> 必须是 的第一个直接子元素，且全文只能有一个。

典型翻车点：

• 放在 里 → 浏览器完全忽略，无提示
• <link href="main.css"> <base href="/app/"> → main.css 已按原始页面 URL 解析完毕，<base> 对它无效
• SSR 模板拼接导致两个 <base> → Chrome 控制台提示 Multiple base elements detected. Only the first one is used.，第二个白写
• 用 JS 动态插入：document.head.appendChild(baseEl) → 已解析的标签不受影响，只对后续新创建的元素起作用

SPA 部署时最容易被忽略的协同陷阱

前端路由、构建配置、Service Worker 和 <base> 四者必须严格对齐，否则资源 404 或路由跳转错位。

关键检查点：

• Vue Router / React Router v6+ 必须显式配置 base: '/subpath/'，否则 router.push('/home') 会跳到根路径
• Vite 构建时若已设 build.base: '/subpath/'，HTML 中就不该再手动写 <base href="/subpath/">，否则路径可能被拼两次（如 /subpath//subpath/js/app.js）
• Webpack 的 publicPath 若与 <base href> 值相同，也可能引发双重拼接
• Service Worker 的预缓存列表若依赖 self.location.origin + '/subpath/'，但 HTML 没配 <base>，缓存路径就全错

最隐蔽的问题往往出在 DevTools Network 面板里：你以为 <img src="logo.png"> 加载的是 /subpath/logo.png，但实际发出的请求地址可能来自 HTML 源码里未被 <base> 覆盖的旧路径——务必看 Network 请求的真实 URL，而不是靠推测。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！