base标签设错会导致全站相对路径解析失效，因其仅在html解析阶段生效且静默忽略非法href（如缺协议、无结尾斜杠），必须置于最前、唯一存在，并与前端路由、构建配置严格对齐，否则引发404或跳转错误。
base 标签一旦设错，整个页面的相对路径都会失效——不是 404 就是跳转错页，而且很难一眼定位问题。
为什么 <base> 设了反而更乱？
它强制重写所有相对 URL 的解析基准，但很多人忽略两点：一是它只影响 href、src、form.action 等属性，不影响 JS 中的字符串拼接；二是页面里只能有一个 <base>，后出现的会覆盖前一个，而浏览器不报错。
常见错误现象：
- 本地
file://打开正常，部署到/project/子目录后，所有 CSS/JS 图片全 404 - 点击导航链接跳到根域名首页，而不是当前子路由
- 表单提交地址变成
https://example.com/login，而非预期的https://example.com/project/api/login
<base> 的正确写法与生效范围
必须放在 内，且在所有依赖它的标签（如 <link>、<script></script>）之前。它的 href 值决定后续所有相对路径的“起点”。
使用场景建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 静态站点生成器（如 Hugo、Jekyll）在构建时注入，避免硬编码路径
- 单页应用（SPA）部署在非根路径时，用它统一资源加载基址
- 不推荐在开发阶段手动加——调试成本高，容易和 webpack/vite 的 public 目录逻辑冲突
示例：<base href="/myapp/"> 会让 <script src="js/app.js"></script> 实际请求 https://domain.com/myapp/js/app.js，而不是 https://domain.com/js/app.js。
替代方案比硬上 <base> 更可靠
多数时候，你真正需要的不是 <base>，而是路径管理的一致性。
- 用构建工具的
public或assetsPublicPath配置代替，例如 Vite 的base配项会自动重写 HTML 中的资源路径，且不影响 JS 运行时逻辑 - 服务端渲染（SSR）中，由模板引擎动态注入
href，比如 Nunjucks 中写<base href="%7B%7B%20BASE_URL%20%7D%7D"> - 纯前端项目可封装一个
resolveUrl(path)工具函数，统一处理 API 请求和资源路径，比全局 base 更可控
容易被忽略的兼容性细节
<base> 在所有现代浏览器中都支持，但有两个隐性限制：
- 无法在
iframe内部单独设置 base——父页面的<base>会穿透影响子 frame 的相对路径 -
target="_blank"的链接如果用了相对路径，也会受 base 影响，可能意外打开根域新页 - 某些 CMS（如 WordPress）的编辑器预览模式会动态插入
<base>，导致你在前台看到的和后台编辑器里不一致
最麻烦的是：它不抛错、不警告，出问题时你得逐个检查 href 和 src 是怎么被解析的——这时候翻 Network 面板比读 HTML 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
