浏览器会静默忽略非绝对或根相对路径的，仅/path/或https://...等合法格式生效；它只影响html中硬编码的相对url，不干预js/css动态加载；验证需检查document.baseuri及实际请求路径。
base href写成相对路径会被浏览器静默忽略
浏览器对 <base> 的 href 值校验极严：只要不是以 http://、https://、// 或 / 开头，整个标签就会被丢弃——不报错、不警告、控制台无任何提示。你写了 <base href="assets/">，等同于没写。
后果是所有原本依赖它的相对路径（如 <img src="logo.png">）仍按当前 HTML 文件 URL 解析，比如页面在 https://example.com/blog/post.html，图片就去请求 https://example.com/blog/logo.png，而不是你预期的 https://example.com/assets/logo.png。上线后批量 404 是最常见表现。
-
<base href="static/">→ 无效，被跳过 -
<base href="../dist/">→ 含..，规范禁止，丢弃 -
<base href="cdn/v2">→ 缺协议和开头/，无效 -
<base href="%PUBLIC_PATH%/">→ 若构建未替换，浏览器收到字面量字符串，照样失效
为什么根相对路径必须以/开头且结尾带/
合法的根相对路径只有一种形式：<base href="/myapp/">。开头 / 表示从域名根开始；结尾 / 是硬性要求，否则 Firefox 和 Opera 会错误截断拼接。例如 <base href="/myapp"> + css/app.css 可能变成 /myappcss/app.css，直接 404。
绝对 URL 更稳妥：<base href="https://cdn.example.com/v3/">，协议、域名、路径全明确，不受部署子路径或浏览器差异影响。
- 推荐生产环境用绝对 URL，尤其 CDN 场景
- 根相对路径仅适用于确定部署在固定子路径（如
/admin/）且需跨协议兼容的场景 -
<base href="//cdn.example.com/v3/">是协议相对写法，自动继承当前页 http/https，但需确保 CDN 支持双协议
哪些资源看似受 base 影响，其实完全不受控
<base> 只在 HTML 解析阶段生效，改写的只是硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值）。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、CSS 文件中background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x"> - ⚠️ 特别注意：
a href="#"在<base href="/sub/">下会解析为/sub/#，触发页面重载和滚动回顶，锚点跳转失效
如何验证 base 是否真正生效
不能只看 HTML 源码里有没有 <base>，得确认它是否被浏览器采纳并影响了实际请求。
- 打开 DevTools → Elements 面板，检查
内是否**只有一个**且位置**最前**的<base href="..."> - 右键任意相对链接（如
<img src="logo.png">）→ “Open in new tab”，看地址栏实际请求路径是否符合base href值拼接结果 - 在 Console 中执行
document.querySelector('base')，确认返回元素；再查document.baseURI，它应等于base href值（若为空，则 base 未生效） - 服务端模板或前端框架中动态注入
<base>极易出问题——DOM 已开始解析，后续资源不会重新 resolve，必须确保它在初始 HTML 中就存在
最容易被忽略的是：<base> 和构建工具（如 Vite 的 base 配置、Webpack 的 publicPath）若同时设置且值相同，资源路径可能被拼两次，比如 /a/b/c//a/b/c/js/app.js。这种叠加错误很难一眼发现，只能靠实际请求路径反推。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
