base href必须是绝对URL或根相对路径，否则浏览器会静默忽略该标签，导致所有相对路径仍按当前页面URL解析而引发404；常见错误包括缺协议、含“..”、结尾无斜杠等。
base href 为什么必须是绝对 URL 或根相对路径
浏览器解析 <base> 时，如果 href 值不是以 http://、https://、// 或 / 开头，整个标签会被静默忽略——你不会看到错误，但所有相对路径仍按当前页面 URL 解析，结果就是大量 404。
常见翻车写法：<base href="static/">（缺协议和域名）、<base href="../assets">（含 ..）、<base href="https://example.com">（结尾没斜杠）。
-
href值必须以/结尾（如/myapp/），否则 Firefox/Opera 会截断路径，导致css/app.css变成/myappcss/app.css - 部署在 CDN 场景下，用完整绝对 URL 更稳妥，比如
<base href="https://cdn.example.com/v2.3/"> - 本地开发调试时，
href写成http://localhost:3000/比/更安全，避免和后端路由冲突
哪些资源受 base 标签影响，哪些完全不受
<base> 只在 HTML 解析阶段起作用，它改写的是浏览器对 src、href、action 等属性中**相对 URL 的初始解析逻辑**，不是运行时重写。
- ✅ 受影响：
<img src="logo.png">、<link href="style.css">、<a href="about.html">、<form action="submit.php">、CSS 中的background: url(avatar.jpg) - ❌ 不受影响：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、CSS@import "reset.css"、<iframe src="page.html"> - ⚠️ 半受影响：JavaScript 中
document.baseURI会返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
SPA 部署在子路径时，base 标签和前端路由怎么协同
Vue Router 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，不自动同步。只设一个，另一个大概率出问题。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Vue Router / React Router v6+ 必须显式配置
base: '/subpath/'，否则router.push('/home')会跳到根路径 - HTML
<base href="/subpath/">是为了让script、link正确加载，否则 chunk 文件 404 - Service Worker 缓存策略若依赖
self.location.origin + '/subpath/'，而 HTML 没配<base>，则预缓存路径错位 - 微前端场景下，子应用若同时设了
publicPath（Webpack）和<base>，资源路径可能被拼两次，变成/subpath/subpath/js/app.js
为什么建议优先用构建工具而非 base 标签处理路径
硬塞 <base> 是“补丁式”方案，容易掩盖路径管理混乱的本质问题，尤其在多环境、CDN、SSR 混合部署时。
- Vite 的
base配置会自动重写所有静态资源引用，并注入正确的<base href>（可关掉） - Webpack 的
output.publicPath控制 JS/CSS 加载路径，比靠 HTML 标签更底层、更可控 - 服务端模板（如 EJS、Nunjucks）直接输出绝对 URL：
<script src="{{ CDN_URL }}/main.js"></script>，彻底绕过解析歧义 - 动态插入
<base>（如通过 JS 创建并 append）不可靠：已解析的资源不会重新计算，且必须在<head>初始解析完成前执行
真正难判断的不是要不要加 <base>，而是这个路径到底该管哪些资源、不该管哪些——尤其当 HTML 在主站，图片在 CDN，API 走代理时，href 值稍偏一点，整页资源就断链。
