base href必须是绝对URL或以/开头的根相对路径，否则浏览器静默忽略；须置于<head>最前且唯一；仅影响HTML中纯相对路径（如src、href），不影响JS/CSS动态路径。
base href 必须是绝对 URL 或以 / 开头的根相对路径
浏览器只认 href 值以 https://、http://、// 或 / 开头的写法，其他一概静默忽略——不报错、不警告，但所有 <img src="logo.png"> 都会退回到按当前页面 URL 解析，上线后批量 404。
常见无效写法包括：
-
href="static/"（缺协议和域名） -
href="../assets/"（含..） -
href="/myapp"（结尾没斜杠，Firefox/Opera 可能截断成/myappcss/） -
href="%PUBLIC_URL%/"（未被服务端或构建工具替换，字面量发到浏览器）
✅ 推荐写法：
-
<base href="https://cdn.example.com/v3/">（绝对 URL，CDN 场景最稳妥） -
<base href="/myapp/">（根相对路径，结尾斜杠不能少） -
<base href="//cdn.example.com/v3/">（协议相对，自动继承当前页 http/https）
base 标签必须放在 <head> 最前面且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，这个动作只在解析阶段生效，且仅对它之后出现的标签起效。放错位置等于没写。
立即学习“前端免费学习笔记（深入）”；
错误示例：
-
<head><title>App</title><base href="/app/"></head>→<title>已解析完毕，<base>对它无效 -
<body><base href="/app/"></body>→ 浏览器直接忽略，无提示 - SSR 模板中 header 和 page 各 render 一个
<base>→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，后一个失效
正确顺序必须是：
<head> <base href="/myapp/"> <title>My App</title> <link href="style.css"> <script src="app.js"></script> </head>
哪些路径受 base 影响，哪些完全不受控
<base> 不是全局路径代理，它只在 HTML 解析阶段改写纯相对路径（即不以 /、: 或协议开头的字符串），对 JS/CSS 运行时行为毫无作用。
✅ 真正受影响（HTML 属性中硬编码的相对路径）：
<img src="icon.svg"><script src="bundle.js"><link href="theme.css"><form action="submit.php">- CSS 中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响（JS/CSS 运行时路径）：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="page.html">（它的src相对于 iframe 当前 URL）
SPA 部署子路径时，base 和前端路由必须严格对齐
Vue Router 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，不自动同步。只设一个，另一个大概率出问题。
典型翻车场景：
- 只配了 Vue Router 的
base: '/admin/'，但 HTML 没加<base href="/admin/">→ chunk 资源 404 - Webpack 的
publicPath设为/admin/，又加了<base href="/admin/">→ 资源路径被拼两次，变成/admin/admin/js/app.js - Service Worker 缓存策略依赖
self.location.origin + '/admin/'，而 HTML 没配<base>→ 预缓存路径错位
微前端或 SSR 场景下，<base> 很容易和构建配置、路由配置、CDN 路径产生隐式耦合。一旦部署路径变更，必须同步检查这三处，漏掉任何一处都可能引发静默失败。
