base href必须以http://、https://、//或/开头且结尾带斜杠，否则浏览器静默丢弃导致批量404；仅影响html中纯相对路径，与前端路由、构建工具配置需严格对齐。
base href 必须以 / 开头且结尾带斜杠，否则静默失效
浏览器对 <base href> 的校验极其严格：值不是以 http://、https://、// 或 / 开头，整条标签就被丢弃——控制台零提示，但所有 <img src="logo.png">、<script src="app.js"></script> 全部回退到当前页面 URL 解析，上线后批量 404。
常见无效写法包括：
-
href="assets/"（缺协议和根斜杠） -
href="../static/"（含..） -
href="/subapp"（结尾没斜杠，Firefox/Opera 会截断为/subappcss/app.css）
真正合法的只有两种形式：
-
href="/subapp/"—— 根相对路径，结尾斜杠不可省 -
href="https://cdn.example.com/v3/"—— 绝对 URL，CDN 场景最可控
Vue Router / React Router v6+ 完全不读 document.baseURI
<base href="/subapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们根本不依赖 document.baseURI，也不会根据 <base> 自动修正导航行为。
后果很直接：HTML 中写了 <base href="/subapp/">，但路由没配 base，就会出现“资源加载走 /subapp/js/app.js，点击链接却跳到 /home”这种割裂现象。
必须显式对齐配置：
- Vue Router：
createRouter({ base: '/subapp/' }) - React Router v6+：
<router basename="/subapp"></router>
漏配任一，router.push('/home') 或 <link to="/home"> 都会跳到根路径，而非 /subapp/home。
Webpack/Vite 的 publicPath/base 和 HTML 中的
构建工具的路径配置和 HTML 的 <base> 是两套独立机制，混用极易导致路径被拼两次。
例如：
- Webpack
publicPath: '/subapp/'+ HTML<base href="/subapp/">→ 资源请求变成/subapp//subapp/js/app.js - Vite
base: '/subapp/'构建时已重写所有静态资源路径，此时再手动加<base href="/subapp/">就是重复
推荐策略：
- 用 Vite/Webpack 时，让构建工具统一处理路径，HTML 中不写
<base> - 不用构建工具或需 CDN 分离时，才靠
<base href="https://cdn.example.com/v3/">精确控制资源加载起点
Service Worker 和微前端场景下路径一致性最难守
Service Worker 的预缓存策略若写成 self.location.origin + '/subapp/' + 'js/app.js'，但 HTML 没配 <base href="/subapp/">，缓存路径就错位；而微前端子应用若同时设了 Webpack publicPath 和 HTML <base>，资源路径可能变成 /subapp/subapp/js/app.js。
真正麻烦的不是单点配置，而是构建产物、CDN 缓存、Service Worker 预缓存、前端路由跳转全部依赖这个前缀的一致性——漏掉一个环节，就出现资源加载失败或路由白屏。
最容易被忽略的是本地开发：用 http://localhost:3000/ 作 href 比用 / 更安全，能避免和后端路由冲突；生产环境走 CDN 时，用完整绝对 URL 比根相对路径更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
