标签不是银弹，用错会导致全站资源404且无报错；href必须以/、http://、https://或//开头且结尾带/才生效，仅影响html解析阶段的纯相对路径，与js/css运行时路径及前端路由无关。
<base> 标签不是“让跨目录链接变简单”的银弹，而是把路径解析权从浏览器默认行为里硬抢过来——用对了省事，用错了一整页资源全 404，且毫无报错提示。
base href 必须以 / 或协议开头，否则直接失效
浏览器遇到 <base href="assets/"> 这种写法，会静默忽略整个标签。所有 <img src="logo.png"> 仍按当前页面 URL 解析，结果就是 404。真正有效的写法只有两类：
-
<base href="https://cdn.example.com/v2.3/">（完整绝对 URL，结尾必须有/） -
<base href="/myapp/">（根相对路径，开头/，结尾也必须有/）
常见翻车点：<base href="static/css/"> 缺协议和根斜杠；<base href="../public/"> 含 ..；<base href="https://example.com"> 少结尾斜杠——Firefox 会把 css/app.css 拼成 https://example.comcss/app.css。
哪些标签受 base 影响，哪些完全不受
<base> 只在 HTML 解析阶段改写相对 URL 的初始计算逻辑，不是运行时重写。这意味着：
- ✅ 受影响：
<img src="icon.svg">、<link href="main.css">、<a href="about.html"></a>、<form action="login"></form>、CSS 中的background: url(avatar.jpg) - ❌ 完全不受：
fetch('./api/data')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="embed.html"></iframe> - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA 部署到子路径时，base 标签和前端路由必须配对使用
Vue Router 的 base: '/admin/' 和 HTML 的 <base href="/admin/"> 是两套独立机制，只设一个必出问题：
- 只设 Vue Router
base：JS 路由跳转正常，但<script src="js/chunk.js"></script>因没<base>导致 404 - 只设
<base href="/admin/">：资源加载正常，但router.push('/home')会跳到https://site.com/home而非/admin/home - 微前端场景下还要警惕：Webpack 的
publicPath和<base>若都设为/subapp/，资源路径可能被拼两次，变成/subapp/subapp/js/app.js
本地开发 vs CDN 部署，href 值策略不同
本地调试时，用 <base href="http://localhost:3000/"> 比 / 更安全，避免和后端路由（如 Spring Boot 的 /api/**）冲突；CDN 场景下必须用完整绝对 URL，例如 <base href="https://cdn.example.com/v2.3/">，否则资源可能从源站加载，失去 CDN 加速效果。构建工具（如 Vite 的 base 配置、Webpack 的 publicPath）生成的 HTML 通常已自动注入正确值，手动加 <base> 很可能重复或覆盖。
最容易被忽略的是：哪怕你只改了一个 <link href="style.css"> 的路径，只要没同步更新 <base href>，就可能让整页样式失效——而浏览器控制台不会告诉你 <base> 被忽略了，只会安静地报一堆 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
