base标签在所有主流浏览器中均原生支持，但行为差异集中于相对路径解析和target继承；ie8–10在怪异模式下会忽略它；构建工具与base混用易致路径重复；其影响覆盖fetch、css等所有相对url。
base 标签在所有主流浏览器中都原生支持，但行为差异集中在相对路径解析和 target 继承上
base 标签本身没有兼容性问题——Chrome、Firefox、Safari、Edge（包括 Chromium 和旧版 Trident）、iOS Safari、Android WebView 全部识别 <base> 并执行 href 解析。真正出问题的，是开发者误以为“写了就稳”，却没验证它是否按预期改写了所有相对 URL。
常见错误现象：
-
<img src="logo.png">在 DevTools Network 面板里请求的是/logo.png而不是预期的https://cdn.example.com/logo.png - SPA 刷新后路由 404，但静态资源（如
index.js）也 404，说明<base href="/subpath/">同时影响了 JS 加载路径 -
<a href="#"></a>点击后跳转到https://example.com/#，而非当前页锚点，因为href="#"被解析为https://example.com/#
实操建议：
- 打开 Chrome DevTools → Network 面板，刷新页面，逐个检查
<img>、<script></script>、<link>的 “Initiator” 和 “URL” 列，确认实际请求地址是否含 base 前缀 - 不要依赖 HTML 源码里的
src值判断路径——它只是相对值，最终地址必须以 Network 中显示为准 - 若用 Vite 或 Webpack 构建，优先配
build.base（Vite）或output.publicPath（Webpack），而非手动写<base>，避免双重复盖
IE8–10 下 base 标签会失效，但不是因为不支持，而是因为 DOCTYPE 触发了怪异模式
IE8–10 实际支持 <base>，前提是文档处于 Standards Mode。一旦 前有空格、BOM 或注释，IE 就降级进 Quirks Mode，此时 <code><base> 被完全忽略——所有相对 URL 回退到以当前页面 URL 为基准，导致资源全部 404。
实操建议：
- 用 VS Code 打开 HTML 文件，右下角确认编码是 UTF-8 without BOM，不是 UTF-8
- 在 Chrome DevTools Elements 面板顶部查看渲染模式：必须显示 Standards，若显示 Quirks，立刻删掉 DOCTYPE 前所有字符
- IE 条件注释对
<base>无效——它只控制脚本/样式加载，不能修复解析逻辑。解决方式只有：确保 DOCTYPE 正确 + 不在 IE 中依赖 base 做关键路径分发
target="_blank" 在 Safari 和部分 Android WebView 中可能被拦截，且无法被单个链接覆盖
<base target="_blank"> 会强制所有 <a></a>、<form></form> 默认新窗口打开，但 Safari 16+ 和某些 Android WebView 会拦截无 rel="noopener" 的 target="_blank"，导致链接静默失败；更麻烦的是，即使某个 <a href="..." target="_self"></a> 显式写了 target，在旧版 Android WebView（如 Android 4.4 KitKat）中仍可能被 base 的 target 覆盖。
实操建议：
- 永远不要只靠
<base target="_blank">控制打开方式——它不可靠，且存在安全风险（缺少rel="noopener"会导致window.opener泄露） - 若必须统一 target，改用 JS 注入：
document.querySelectorAll('a[href]').forEach(a => a.target = '_blank');，再补rel="noopener" - 对于表单提交，
<form target="_self"></form>在绝大多数现代浏览器中可覆盖 base，但 Android 4.4 及更早版本不行，建议直接移除<base target>，显式写每个 target
Vite / Webpack 构建项目中混用 base 标签和构建配置，容易导致路径错乱
Vite 的 build.base 和 Webpack 的 publicPath 本质是编译期重写所有资源引用，而 <base href> 是运行时由浏览器解析。两者叠加时，index.html 里写的 <script src="/assets/index.js"></script> 会被构建工具转成 <script src="/subpath/assets/index.js"></script>，如果又加了 <base href="/subpath/">，最终请求变成 /subpath/subpath/assets/index.js，404。
实操建议：
- 选一个方案并坚持到底：要么全用构建配置（推荐），要么全用
<base>（仅限简单静态站） - Vite 用户禁用 HTML 中的
<base>，改用build.base: "/subpath/"，同时确保server.base与之匹配，开发和生产路径一致 - 若必须保留
<base>（如 CMS 输出 HTML 无法改构建配置），则构建时设build.base: "/"，让构建工具不重写路径，完全交由 base 解析
最容易被忽略的一点：base 标签影响的是所有相对 URL 的解析逻辑，不是“只管 a/img/link”。fetch()、import()、CSS @import、甚至 background-image:url() 中的相对路径，都会受它作用——但这些地方你没法在 HTML 里一眼看到，只能靠 Network 面板逐个验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
