标签仅支持绝对URL或根相对路径（以/开头），相对路径会被浏览器静默忽略；它只影响纯相对路径的HTML资源链接，对JS动态URL、以/或协议开头的URL无效；SPA中应优先使用构建工具配置而非HTML base标签。

标签不支持相对路径，写相对路径会直接失效 —— 浏览器静默忽略它，后续所有相对链接仍按当前页面 URL 解析，404 风险极高。

base href 必须是绝对 URL 或根相对路径

常见错误是把 href 写成 href="assets/" 或 href="../"。这类相对值在所有主流浏览器中都会被丢弃， 形同虚设。

• ✅ 正确写法只有两种：href="https://example.com/subapp/"（绝对 URL）或 href="/subapp/"（根相对路径，开头必须是 /）
• ❌ href="subapp/"、href="./css/"、href="../../" 全部无效
• ⚠️ 构建工具（如 Vite、Webpack）注入的环境变量如 href="${PUBLIC_PATH}" 若未被服务端/构建时替换，会原样发给浏览器，变成字面量字符串，同样失效

多级目录下 base 的实际解析逻辑

假设部署在 https://example.com/a/b/c/app.html，你加了 ，那么：

• → 解析为 https://example.com/a/b/logo.png
• → 解析为 https://example.com/a/b/style.css
• → 解析为 https://example.com/a/b/page.html
• 但 （以 / 开头）仍走根路径，不受 影响

注意： 不改变已带协议、域名或根路径的 URL，只干预“纯相对路径”（无 :、无 / 开头）。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

SPA 项目里用 base 要格外小心

Vue Router、React Router 等都依赖自己的 base 配置（如 Vue Router 的 createRouter({ history: createWebHistory('/subpath/') })），它和 HTML 的 是两套机制，互不同步。

• 路由匹配失败：HTML 改变资源加载路径，但 router 仍按自身配置匹配 URL，可能白屏或 404
• 懒加载 chunk 加载错乱：Webpack/Vite 生成的 chunk-xxx.js 路径若没同步适配，会 404
• Service Worker 缓存路径错位：缓存策略基于请求 URL， 导致资源请求路径变化，但 SW 脚本没更新规则，缓存失效或命中错误资源
• ✅ 推荐做法：SPA 统一由构建工具控制 public 资源路径（如 Vite 的 base 配项），HTML 中不写

多个 base 标签或位置错误的后果

只能有一个，且必须出现在 最前面（早于所有 、<script></script>、）。

• ⚠️ 如果写了两个，后一个覆盖前一个；但旧版 IE 可能直接崩溃解析
• ⚠️ 如果 在某个 后面，那这个 style.css 仍按当前页面 URL 解析，不受影响
• ✅ 检查方法：打开 DevTools → Elements → 看 里 是否唯一、是否第一个、href 值是否以 http://、https:// 或 / 开头

真正容易被忽略的是：它对 JS 动态创建的 URL（如 fetch('./api')、new Image().src = 'icon.png'）完全无效 —— 这些仍按脚本所在页面 URL 解析，不是 的管辖范围。

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