标签必须为绝对 url 或根相对路径（以 / 结尾），且须置于 最顶部唯一声明；仅影响 html 中硬编码的相对 url（如 src、href），不影响 js 动态请求、css 路径及 iframe；spa 部署子路径时需与路由 base 和构建 publicpath 三者协同。
<base> 标签不是“设个路径就完事”的配置，它用错会静默失效、大面积 404，且控制台不报任何错误。
base href 必须是绝对 URL 或根相对路径，否则浏览器直接丢弃
浏览器只认以 http://、https://、// 或 / 开头的 href 值。其他写法——比如 static/、../assets、https://example.com（结尾没 /）——整条 <base> 都被忽略，不警告、不报错，但所有 src="logo.png" 仍按当前页面 URL 拼接，上线后必 404。
✅ 正确写法只有三类：
-
<base href="https://cdn.example.com/v3/">（推荐，部署可控，跨环境稳定） -
<base href="/myapp/">（根相对路径，结尾必须带/） -
<base href="//cdn.example.com/v3/">（协议相对，自动继承当前协议）
❌ 常见无效写法：
-
<base href="assets/">（缺协议、缺根斜杠） -
<base href="%PUBLIC_URL%/">（构建未替换，字面量发到浏览器） -
<base href="/myapp">（结尾没/，Firefox 可能截断成/myappcss/）
base 必须放在 最顶部，且只能有一个
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。
典型翻车场景：
-
<base href="/static/">（被完全忽略） - SSR 模板拼接时，
header和page各 render 一个<base>（只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used.） -
<title>My Page</title> <link href="style.css"> <base href="/app/">（style.css不受<base>影响）
正确顺序示例：
<base href="/myapp/"><title>My Page</title><link href="style.css"> @@##@@
哪些属性真受影响，哪些完全不管
<base> 只在 HTML 解析阶段起作用，仅重写硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值）。
✅ 明确受影响：
<img src="logo.png"><link href="style.css"><script src="index.js"></script><form action="login.php"></form>- CSS 中的
background: url(avatar.jpg)
❌ 完全不受影响：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')- CSS
@import "reset.css" -
<iframe src="page.html"></iframe>（动态加载，不走<base>）
⚠️ 半受影响：
-
document.baseURI返回<base href>的值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA 部署子路径时，base 标签和前端路由必须配对设置
<base href="/subpath/"> 和 Vue Router 的 base: '/subpath/' 是两套独立机制，缺一不可。
只设 <base href="/subpath/">：JS chunk 能加载，但 router.push('/home') 会跳到 /home（根路径），不是 /subpath/home；
只设 Vue Router base：路由跳转正常，但 <script src="index.js"></script> 404（找不到 /index.js，实际应在 /subpath/index.js）。
微前端场景下还要小心 Webpack 的 publicPath，三者重复拼接会导致路径变成 /subpath/subpath/js/app.js。
真正麻烦的不是配置本身，而是构建产物、CDN 缓存、Service Worker 预缓存路径全部依赖这个前缀的一致性——漏掉一个环节，就出现资源加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
