base标签必须置于head内且仅能有一个，href须为绝对或协议相对URL，target属性会全局影响链接行为，SPA应优先配置构建工具而非base标签。
base标签必须放在head里，且只能有一个
html的<base>标签不是可有可无的装饰，它会直接影响所有相对url的解析起点。一旦放错位置（比如塞进），浏览器直接忽略——连警告都不会抛。更麻烦的是，如果页面中意外出现两个<base>，后一个会覆盖前一个，但部分旧版ie甚至会直接崩溃解析。
实操建议：
- 只在
内写一次，且务必在所有<link>、<script></script>、<img>等依赖路径的标签之前 - 不要用JavaScript动态插入
<base>，DOM操作无法改变已开始解析的URL基准 - 服务端渲染时注意模板拼接顺序，避免条件逻辑导致重复或遗漏
href值必须是绝对路径，不能用相对路径或变量占位
<base href="assets/">这种写法看似省事，实际无效：浏览器要求href属性必须是**绝对URL**（含协议和域名）或**协议相对URL**（如//cdn.example.com/）。写相对路径会导致整个<base>被静默丢弃，后续所有相对链接仍按当前页面URL解析，极易引发404。
常见错误现象：
- 本地开发时
<base href="/static/">能跑，部署到子路径（如https://a.com/myapp/）后所有CSS/JS 404 - 误用环境变量，如
<base href="%24%7BASSET_BASE%7D">，未被服务端替换就发给浏览器，变成字面量字符串
正确做法：
- 静态站点：用完整绝对路径，如
<base href="https://cdn.example.com/v2.1/"> - 单页应用（SPA）部署在子路径：必须带上下文路径，如
<base href="/myapp/">（注意结尾斜杠） - 避免在
href里拼接查询参数或hash，它们会被忽略
target属性影响所有带rel="noreferrer"以外的a标签跳转
<base target="_blank">看着方便，但副作用极隐蔽：它会让页面中**所有没显式声明target的<a></a>标签**默认新窗口打开——包括你根本没意识到的<a href="#"></a>、<a href="javascript:void(0)"></a>，甚至第三方组件里的链接。更糟的是，现代浏览器对未声明rel="noopener"的target="_blank"会强制降级为target="_blank noopener"，但老版本不会，存在安全风险。
使用场景判断：
- 纯文档站、营销页，确实需要全局外链新开，才考虑设
target - Web应用、后台系统，一律不要设
target，让交互逻辑由JS控制更可控 - 若必须用，优先写
<base target="_blank" rel="noopener">（尽管rel在<base>上不生效，得每个<a></a>自己加）
Vue/React项目里别靠base标签解决资源路径，改构建配置
在打包工具生成的HTML中硬塞<base href="/subpath/">，短期能绕过404，但埋下三类坑：路由匹配失败（Vue Router的base选项和HTML <base>不联动）、懒加载chunk加载路径错乱、Service Worker缓存策略错位。Webpack/Vite的publicPath或base配置才是正解。
实操对比：
- 错：在
index.html里写<base href="/admin/">，同时Vite配置base: "/admin/"→ 双重base导致资源路径变成/admin/admin/assets/xxx.js - 对：删掉HTML里的
<base>，只配Vite的base: "/admin/"，或Webpack的output.publicPath: "/admin/" - SSR场景下，还要同步检查Node服务返回的HTML中
<base>是否被模板引擎重复注入
真正难处理的是混合部署：前端静态资源走CDN，而API接口走另一个域名。这时候<base>完全无能为力，必须靠环境变量+运行时拼接URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
