<base>标签仅在HTML解析阶段静态重置相对URL基准起点，必须置于<head>最前且唯一，href须为绝对URL或合法根相对路径（如/myapp/），否则静默失效导致404；它不影响fetch、import等运行时路径，需与前端路由及构建配置严格对齐。
<base> 标签不能“解决”路径变化，它只是在 HTML 解析阶段静态重置相对 URL 的基准起点；想让它生效，必须在 HTML 输出前就把 href 值写对——写错、写晚、写多，都会导致资源 404 且浏览器不报错。
base href 必须是绝对 URL 或合法根相对路径
浏览器只认以 http://、https://、// 或 / 开头的 href 值，其余一律静默丢弃。常见翻车写法：
-
href="dist/"→ 缺协议和根斜杠，无效 -
href="../public"→ 含..，非法 -
href="/myapp"→ 结尾没斜杠，Firefox 可能截断成/myappcss/ -
href="%PUBLIC_URL%/"→ 没被服务端或构建工具替换，就是字面量字符串
✅ 正确示例：href="https://cdn.example.com/v3/"、href="/myapp/"、href="//cdn.example.com/v3/"
base 标签必须放在 <head> 最顶部且唯一
HTML 是自上而下解析的，<base> 只影响它之后出现的相对 URL。位置或数量错，等于没写：
立即学习“前端免费学习笔记（深入）”；
- 放在
<title>或<link>后面 → 这些标签已按原始 URL 解析完毕，不受控 - 写在
<body>里 → 浏览器直接忽略 - 多个
<base>→ 只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
正确顺序：<head><base href="/myapp/"><title>App</title><link href="style.css"></head>
base 不影响 fetch、import、@import 等 JS/CSS 运行时路径
这是最容易误判的一点：设了 <base href="/cdn/">，不代表所有路径都自动带前缀。它只作用于 HTML 解析阶段的属性值：
- ✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="theme.css">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch("./api/data.json")、import("./utils.js")、@import "reset.css"、new Worker("./worker.js")
API 请求若写成 fetch("api/users")，会被解析为 /cdn/api/users（如果 base 是 /cdn/），而非预期的后端接口地址——这类错误不会报错，但请求发错地方。
与前端路由和构建配置必须严格对齐
<base href="/a/b/c/"> 和 Vue Router 的 createRouter({ base: '/a/b/c/' }) 或 React Router 的 <Router basename="/a/b/c/"> 必须显式一致。否则：
-
<img src="logo.png">加载/a/b/c/logo.png -
router.push("/home")却跳转到/home（不是/a/b/c/home）
更危险的是：Webpack 的 publicPath 或 Vite 的 base 配置如果和 HTML 中手写的 <base href="/a/b/c/"> 重复，资源路径会被拼两次，比如 /a/b/c/a/b/c/app.js。
真正要应对项目路径变化，<base> 只是其中一环，而且是最脆弱的一环——它不参与运行时逻辑，不校验有效性，不提供 fallback，一旦出错就是静默 404。关键动作永远在构建或服务端：确保 href 值在 HTML 被浏览器下载前就确定，并与路由、打包、部署上下文完全对齐。
