base href 必须是绝对 url 或以 / 开头且结尾带斜杠的根相对路径，否则标签被静默丢弃导致资源 404；base target 会影响所有未声明 target 的 a 和 form 元素，存在安全与行为风险；base 标签仅在 html 解析时对纯相对路径属性生效，且必须位于 head 中首个元数据标签位置。
base href 必须是绝对 URL 或以 / 开头且结尾带斜杠的根相对路径
浏览器对 href 值校验极严：只要不是以 http://、https://、// 或 / 开头，整个 <base> 标签就被静默丢弃——控制台零提示，但所有 src="logo.png" 都退回到按当前页面 URL 拼接，上线后资源 404 是大概率事件。
常见无效写法包括：
-
href="static/"（缺协议或根斜杠） -
href="../assets"（含..，不被识别为根相对） -
href="/myapp"（结尾没斜杠，Firefox 可能截断成/myappcss/） -
href="%PUBLIC_URL%/"（服务端未替换，浏览器收到字面量字符串）
✅ 推荐写法：
-
href="https://cdn.example.com/v3/"（绝对 URL，部署可控） -
href="/myapp/"（根相对路径，必须带结尾斜杠） -
href="//cdn.example.com/v3/"（协议相对，自动继承当前协议）
base target 会无差别作用于所有未显式声明 target 的 a 和 form 元素
target 不是“方便快捷键”，而是默认行为开关。设为 _blank 后，所有没写 target 的 <a></a> 和 <form></form> 都会在新窗口打开——包括页脚备案链接、第三方组件里的跳转按钮，甚至管理后台的登出表单。
更隐蔽的风险：
- 没配
rel="noopener"时，<base target="_blank">在旧浏览器中可能泄露window.opener，构成安全漏洞 -
<iframe src="embed.html"></iframe>的加载行为也受其影响（注意：不是<iframe></iframe>自身的target属性，而是其src解析不受控，但加载目标窗口受 base target 约束） -
<script></script>、<img>、<link>等资源加载完全无视target
base 标签只在 HTML 解析阶段生效，不影响 JS/CSS 运行时路径
<base> 不是全局路径代理，它只在浏览器解析 HTML 文档那一刻，对标签属性中「纯相对路径」做一次拼接重写。拼完就结束，后续 JS 中任何动态行为都不受它影响。
✅ 明确受影响（HTML 属性中不带协议、不以 / 开头、不含 : 的值）：
<img src="logo.png"><script src="index.js"></script><link href="style.css"><form action="submit.php"></form>- CSS 中的
background: url(avatar.jpg)
❌ 完全不受影响：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
document.createElement('script').src = 'app.js'（动态创建）
base 标签位置和数量是硬性限制，JS 动态插入无效
<base> 必须出现在 内，且只能有一个；还必须是 中第一个元数据类标签（即排在 <title></title>、<meta>、<link> 之前）。放错位置或重复声明，直接失效或静默降级。
典型翻车场景：
-
<base href="/static/">（被忽略） - SSR 模板中 header 和 page 分别 render 一个
<base>（只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used.） - 用 JS 动态插入：
document.head.appendChild(baseEl)（已解析的<img src="x">不会重算，只影响之后新创建的元素）
构建时若用模板引擎（如 Hugo、Vue CLI），确保占位符（如 {{ .Site.BaseURL }} 或 %PUBLIC_URL%）在服务端/构建时被真实值替换，而非字面量字符串发到浏览器。
真正麻烦的不是配置本身，而是构建产物、CDN 缓存、Service Worker 预缓存路径全部依赖这个前缀的一致性——漏掉一个环节，就出现资源加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
