index.html中的base标签有什么用？-html教程-PHP中文网

标签全局改写所有相对url解析起点，必须置于最前且唯一，影响img、script、a等标签的src/href，但不影响js动态导入和css@import。

index.html中的base标签有什么用？

base 标签会全局改写所有相对 URL 的解析起点

它不是装饰性标签，而是一个底层解析开关：浏览器一旦遇到 <base href="https://example.com/assets/">，后续所有 <img src="logo.png">、<script src="main.js"></script>、<a href="about.html"></a> 这类相对路径，都会自动拼接到这个基准上，变成 https://example.com/assets/logo.png 等。当前页面 URL 完全失效，不再参与解析。

必须写在最前面，且只能有一个

如果 <base> 出现在 <link rel="stylesheet"> 或 <script></script> 之后，那些标签的路径已经按原始规则解析完毕，<base> 对它们无效；多个 <base> 时，仅最后一个生效，但旧版 IE 可能直接崩溃。常见错误包括：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 JavaScript 动态插入 <base> —— DOM 操作无法回溯修正已开始解析的资源路径
在构建产物中硬塞 <base href="/subpath/"> 却没同步调整 Vue Router 的 base 配置或 Webpack 的 publicPath，导致路由跳转 404 或 chunk 加载失败
把 href 写成相对路径（如 href="assets/"）—— 浏览器静默忽略该 <base>，后续所有相对链接仍按当前页面 URL 解析

SPA 场景下优先用构建配置，而非 base 标签

单页应用依赖前端路由和动态资源加载，<base> 的全局覆盖特性容易与框架行为冲突。例如：

Vue Router 的 base 选项只影响路由匹配逻辑，不改变静态资源路径；若同时设了 <base href="/app/">，但 publicPath 仍是 /，则 main.js 会尝试从 /app/main.js 加载，实际却部署在 /main.js
Webpack/Vite 的 build.assetsDir 和 base 配置能精准控制 HTML、JS、CSS、图片等各类资源的发布路径，比 <base> 更可控
Service Worker 缓存策略依赖完整 URL，<base> 导致缓存 key 和实际请求 URL 不一致，造成离线失效

target 属性会强制作用于所有未显式声明 target 的链接

<base target="_blank"> 看似方便，实则危险：所有 <a href="...">></a> 默认新开窗口，包括内部导航、表单提交、甚至 <form></form> 的 action 目标。更严重的是，若没配 rel="noopener"，新窗口可访问原页面的 window.opener，存在安全风险。现代浏览器对 target="_blank" 会自动补 rel="noopener"，但 IE11、Edge Legacy 等老版本不会。

最容易被忽略的一点：构建工具生成的 HTML 中，<base> 的 href 值必须是运行时确定的绝对路径，不能留空、不能是环境变量占位符（如 ${ASSET_BASE}），否则浏览器会当作文本字符串处理，导致全部相对资源 404。