<base>标签在子目录部署中是防止资源404的刚性需求，必须设为以/开头且结尾带/的绝对路径（如/blog/），并置于<head>最前；它仅影响HTML中纯相对路径解析，对JS运行时、CSS @import、根路径src等无效，且需与前端路由、构建配置、Service Worker路径严格对齐。
<base> 标签在子目录部署中不是“可选优化”，而是防止资源 404 的刚性需求——不设它，<script src="index.js">、<link href="style.css"> 这类纯相对路径会从当前 HTML 文件 URL（如 https://example.com/blog/post.html）出发解析，结果去找 /blog/index.js，而非实际部署位置 /blog/index.js 可能根本不存在，真正资源在 /blog/js/index.js 或 /static/js/index.js。
为什么子目录下相对路径会自动“错位”
浏览器默认以当前 HTML 文档 URL 为基准解析所有纯相对路径。比如页面地址是 https://example.com/a/b/c/page.html，而你写 <img src="logo.png">，浏览器就拼成 https://example.com/a/b/c/logo.png。但构建工具（Vite/webpack）通常把资源输出到 /a/b/c/assets/ 或根下的 /assets/，两者路径结构不一致，必然 404。
<base href="/subpath/"> 必须满足的硬约束
- href 值必须以
/开头，且结尾必须带/（如/blog/），写成/blog在 Firefox/Opera 中会被截断拼接，导致css/app.css变成/blogcss/app.css - 不能写相对路径（如
../assets/）、不能含..、不能缺协议或斜杠，否则浏览器静默忽略整条<base>，毫无提示 - 必须放在
<head>最前面，早于<title>和所有<link>，否则已解析的标签不受影响 - 整个页面只能有一个，多写只认第一个，Chrome 控制台会警告
Multiple base elements detected. Only the first one is used.
它管不了什么：别指望它解决全部路径问题
<base> 仅作用于 HTML 解析阶段的纯相对路径，对运行时行为完全无效：
-
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')—— 全部按当前页面 URL 解析，和<base>无关 - CSS 文件里的
@import "reset.css"、background: url(avatar.jpg)—— 后者受<base>影响（因为是 HTML 解析时计算的），前者不受（CSS 解析独立） -
<iframe src="/admin/frame.html">—— 以/开头，走根路径，绕过<base>
真正麻烦的是协同：前端路由（如 Vue Router 的 base 配置）、构建工具的 publicPath（Webpack）或 base（Vite）、Service Worker 缓存路径，三者必须和 <base href="/subpath/"> 完全对齐；漏掉一个，资源加载或路由跳转就会出错，而且错误往往静默发生，直到用户报 404 才发现。
立即学习“前端免费学习笔记（深入）”；
