部署子路径时需设（结尾带斜杠）于最顶部，仅影响相对路径；target="_blank"可统一外链新窗打开但须配rel="noopener"；cdn场景应避免误改导航链接，资源路径宜由构建工具处理。
部署在子路径时统一资源解析基准
当 SPA 或静态站点部署到非根路径（如 https://example.com/blog/）时，页面内大量 src="js/app.js"、href="css/main.css" 会按当前 HTML URL 解析，结果请求 https://example.com/blog/js/app.js —— 而实际资源可能位于 /js/app.js（根下）或 /blog/js/app.js（子路径下）。不设 <base href="/blog/">，必然批量 404。
关键点：
-
href必须以/开头且结尾带斜杠，写成/blog会被 Firefox/Opera 静默截断，导致css/app.css变成/blogcss/app.css - 必须放在
最顶部，早于<title></title>和所有<link>，否则已解析的标签不受影响 - 只对纯相对路径生效（如
logo.png），不改写/img/logo.png或https://cdn.com/logo.png
强制外链新窗口打开且避免逐个加 target
用 <base target="_blank"> 可让所有未显式声明 target 的 <a></a> 和 <form></form> 默认在新窗口打开。适合内容站、文档站等需防止用户离开主站的场景。
但要注意：
-
<iframe></iframe>的src不受target影响 - 必须配合
rel="noopener"使用，否则存在安全风险：<a href="https://evil.com" target="_blank"></a>会暴露window.opener，可被跳转页控制当前页 - 若部分链接需保留当前页打开，得显式写
target="_self"覆盖默认行为
静态站点生成器中注入动态基准路径
Hugo、Jekyll、VuePress 等工具常通过模板变量注入 <base href="%7B%7B%20.Site.BaseURL%20%7D%7D"> 或 <base href="<%=%20htmlWebpackPlugin.options.publicPath%20%>">，避免硬编码路径。
这能保证：
- 开发时用
/，生产时自动替换成 CDN 域名（如https://cdn.example.com/v2/） - 多环境部署（dev/staging/prod）只需改一个配置，不用改 HTML 源码
- 注意：Webpack 的
publicPath和 HTML 中的<base>不要重复设置相同值，否则资源路径可能被拼两次（如/app//app/js/app.js）
CDN 加速时统一资源域名前缀
把静态资源托管到 CDN 后，用 <base href="https://cdn.example.com/assets/"> 可让所有 src="main.js" 自动解析为 https://cdn.example.com/assets/main.js，无需修改每个标签。
但极易踩坑：
- 页面本身在
https://example.com/，而<base href="https://cdn.example.com/assets/">会让<a href="contact.html"></a>也指向https://cdn.example.com/assets/contact.html—— 这通常不是你想要的 - 正确做法是只对资源类标签（
<img>、<script></script>、<link>）用 CDN，导航链接仍走业务域名；此时应避免用<base href>控制全站，改用构建工具处理资源路径 - CSS 中的
url(logo.png)会受控，但@import "reset.css"不会 —— 后者仍从 CSS 文件所在路径加载
<base> 是 HTML 解析期的一次性重写，它不改变 JS 运行时的任何行为。fetch('./api')、import('./utils')、new URL('./data.json', document.baseURI) 都得靠代码自己处理，不能指望 <base> 全局兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
