详细剖析HTML中base标签在不同网段下的路径映射-html教程-PHP中文网

base href值必须是绝对url或根相对路径（以http://、https://、//或/开头且结尾带/），否则整条标签被静默忽略，导致所有纯相对路径按当前页面url解析而批量404。

详细剖析html中base标签在不同网段下的路径映射

base href 值必须是绝对 URL 或根相对路径，否则浏览器静默忽略

几乎所有跨目录 404 都源于这个前提被违反。base 标签不是“尽力而为”，而是“全有或全无”：只要 href 值不以 http://、https://、// 或 / 开头，整条标签就被丢弃——控制台不报错、不警告，后续所有 src="logo.png" 都退回到按当前页面 URL 解析。

常见翻车写法：

<base href="assets/">：缺协议和根斜杠，无效
<base href="../static/">：含 ..，浏览器直接跳过
<base href="/myapp">：结尾没 /，Firefox/Opera 可能截断成 /myappcss/app.css
<base href="%PUBLIC_URL%">：未被构建工具替换就发到浏览器，字面量字符串，无效

真正安全的写法只有三类：https://cdn.example.com/v3/（CDN 场景首选）、//cdn.example.com/v3/（协议相对）、/myapp/（生产部署子路径，结尾斜杠不可省）。

base 标签只在 HTML 解析阶段生效，且仅影响纯相对路径

<base href="/admin/"> 不会改变 fetch('./api/user')，也不会让 import('./utils.js') 自动加前缀。它只接管 HTML 解析器对属性值中“纯相对路径”的初始拼接逻辑——即既不以 / 开头、也不含协议或冒号的字符串。

受影响的典型场景：

<img src="logo.png"> → 解析为 https://example.com/admin/logo.png
<script src="app.js"></script> → 解析为 https://example.com/admin/app.js
CSS 文件内 background: url(avatar.jpg)（注意：这是 HTML 加载 CSS 时解析的，不是 CSS 引擎运行时 resolve）

完全不受影响的场景：

html-deploy

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

下载

fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')
@import "reset.css"、<iframe src="page.html"></iframe>（它的 src 相对于 iframe 当前 URL）
<a href="/login"></a>、<form action="https://api.example.com/submit"></form>（以 / 或协议开头，绕过 base）

多级子路径部署时，base href 必须与前端路由、构建配置严格对齐

假设应用部署在 https://example.com/a/b/c/，你写了 <base href="/a/b/c/">，但 Vue Router 没配 base: '/a/b/c/'，那么 router.push('/home') 会跳到 https://example.com/home，而不是预期的 /a/b/c/home。

更隐蔽的问题出现在构建环节：

Vite 设了 build.base = '/a/b/c/'，再手动在 HTML 中加 <base href="/a/b/c/"> → 资源路径可能被拼两次，变成 /a/b/c//a/b/c/js/app.js
Webpack 的 publicPath 和 <base href> 值相同 → 同样存在双拼风险
Service Worker 缓存策略若写死 self.location.origin + '/a/b/c/'，但 HTML 没配 <base href="/a/b/c/"> → 预缓存路径错位，资源加载失败

本地开发调试时，<base href="http://localhost:3000/"> 比 <base href="/"> 更安全，能避免和后端路由规则冲突。