标签是部署子路径或cdn时避免资源404的刚性前提，必须为绝对url（如https://cdn.example.com/v3/）或根相对路径（如/myapp/），否则浏览器静默丢弃导致批量404。
<base> 标签不是“锦上添花”的可选项，而是部署到子路径或 CDN 时资源加载不 404 的刚性前提——但它极易写错，且一旦出错，浏览器完全静默，控制台零报错，所有相对路径回退到当前页面 URL 解析，批量 404。
base href 必须是绝对 URL 或以 / 开头的根相对路径
浏览器对 href 值做严格校验：只要不是以 http://、https://、// 或 / 开头，整条 <base> 就被丢弃。这不是警告，是彻底失效。
-
href="assets/"、href="../static"、href="subapp/"→ 全部无效，静默忽略 -
href="/subapp"→ 结尾缺/，Firefox/Opera 会截断拼接，css/app.css变成/subappcss/app.css - ✅ 正确写法只有两种：
href="/subapp/"（根相对路径，结尾斜杠不可省）或href="https://cdn.example.com/v2.3/"（完整绝对 URL） - 本地开发调试时，
href="http://localhost:3000/"比/更安全，避免和后端路由冲突
SPA 中 base 标签必须与构建工具、前端路由三者对齐
<base href="/myapp/"> 只改 HTML 中硬编码的 src/href 解析，它不参与 JS 动态加载、路由跳转或 chunk 加载逻辑——这三者各自有一套路径配置，互不感知。
- Vite 构建需配
build.base: '/myapp/'，否则生成的chunk-xxx.js请求路径仍是根路径，404 - Vue Router 必须显式设
createRouter({ history: createWebHistory('/myapp/') })，否则router.push('/home')跳到/home而非/myapp/home - Webpack 的
publicPath若设为'/'，但 HTML 又写了<base href="/myapp/">，runtime chunk 会请求/myapp/xxx.js，而文件实际在/xxx.js，404 - ⚠️ 最危险组合：
build.base: '/myapp/'+<base href="/myapp/">→ 路径被拼两次，如/myapp//myapp/assets/index.js
哪些资源受 base 影响，哪些完全不受
<base> 是 HTML 解析阶段的静态重写机制，不是运行时中间件。它只影响浏览器首次解析 HTML 时对属性值中相对 URL 的处理。
- ✅ 受影响：
<img src="logo.png">、<link href="style.css">、<script src="main.js"></script>、<form action="api/login"></form>、CSS 中background: url(icon.svg) - ❌ 完全不受：
fetch('./data.json')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('api/user', document.baseURI)；但window.location和document.URL完全不变
为什么构建工具优先，HTML 中尽量不手动写 base
硬塞 <base> 是补丁式方案，掩盖了路径管理混乱的本质问题。尤其在微前端、多环境部署、CDN 分发等场景下，它极易引发路径重复、缓存错位、动态加载失败等连锁故障。
- Service Worker 缓存策略若基于
self.location.origin + '/subpath/'，但 HTML 没配<base>，预缓存路径就错位 - 微前端子应用若同时设了 Webpack
publicPath和<base>，资源路径可能被拼两次，变成/subpath/subpath/js/app.js - Vite、Webpack、Rollup 等构建工具的
base/publicPath配置能统一控制 HTML、JS、CSS、chunk、asset 所有路径，比手动塞<base>更可靠 - 如果必须用
<base>（如纯静态站点、无法修改构建流程），务必确保它出现在最前面，早于所有<link>、<script></script>，且只能有一个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
