必须且只能出现一次，因html5规范强制浏览器仅解析第一个，后续同标签静默丢弃；它须置于最前，否则已解析的资源不受影响，且href值非法（非绝对url或根相对路径）会导致全局相对路径静默404。
为什么<base>必须且只能出现一次
浏览器在 HTML 解析阶段只读取第一个 <base>，后续所有同标签均被忽略——这不是容错逻辑，而是 HTML5 规范硬性要求。你写两个，第二个不会报错，也不会警告，但等于没写；某些旧版 IE 甚至会直接中断解析。
常见误操作包括：服务端模板拼接时条件分支重复注入、组件库动态插入、前端框架 SSR 多次渲染导致 <base> 被多次生成。一旦发生，只有第一个生效，其余静默丢弃。
-
<base href="/app/"> <base href="/static/"> <script src="main.js"></script>→main.js按/app/解析，/static/完全无效 - Vue / React SSR 中多个子组件都调用
renderBaseTag()→ 只有首次调用结果进入 DOM - Webpack 插件 + 自定义 HTML 模板双写
<base>→ 构建产物里存在两个，但 Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
<base> 放在
它必须位于 内部，且**尽可能靠前**——必须在所有依赖路径的标签（如 <link>、<script></script>、<img>）之前。否则，那些标签已按原始页面 URL 解析完毕，<base> 对它们毫无影响。
典型错误场景：
- 把
<base href="/app/">塞进→ 浏览器直接忽略，无任何提示 -
<meta charset="utf-8"> <link href="style.css"> <base href="/app/">→style.css已解析完成，不受/app/影响 - 用 JS 动态创建并
appendChild()→ 解析阶段早已结束，DOM 操作无法回溯修改路径基准
重复或错位的 <base> 导致资源静默 404
最危险的是它不报错。你上线后发现所有 logo.png、app.js、style.css 全部 404，控制台却干干净净——大概率是 <base> 没生效，或生效了但 href 值非法，被浏览器静默丢弃。
href 值只要不满足“绝对 URL（含协议）”或“根相对路径（以 / 开头且结尾带 /）”，整个标签即作废。比如：
-
<base href="assets/">→ 无效，被丢弃 -
<base href="../static/">→ 含..，规范禁止，丢弃 -
<base href="/app">→ 缺末尾/，Firefox 可能拼出/appcss/这类诡异路径
这种失效是全局且静默的，影响所有纯相对路径（如 icon.svg、data.json），但对 fetch('./api')、import('./utils.js') 等运行时路径完全无感——这点最容易让人误判问题根源。
target 属性也受“唯一性”约束，且优先级低于显式声明
<base target="_self"> 的作用不是“强制覆盖窗口”，而是为所有未设 target 的 <a></a> 和 <form></form> 提供默认行为。但它会被任何显式 target 覆盖，哪怕那个值是空字符串 target=""（注意：这不算显式声明，仍走 base）。
真正容易踩坑的是：<base target="_blank"> 一旦存在，所有没写 target 的表单提交都会新开窗口，用户点“保存”后原页面还在，但数据已提交到新页——这种交互断裂很难被测试覆盖。
所以，“只能一次”不只是语法限制，更是行为确定性的底线：多一个，就多一分不可控；位置错一点，就满盘皆输。SPA 部署时，它和路由 base、构建 publicPath 是三把锁，缺一不可，但又不能互相叠加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
