必须带协议和尾部斜杠，否则浏览器静默忽略；漏斜杠会导致firefox/opera截断路径如v2css/app.css；仅影响html中相对路径（如src、href），不影响fetch、import等js/css运行时路径。
base href 写成 CDN 域名时必须带协议和尾部斜杠
直接写 <base href="https://cdn.example.com/v2"> 会出问题——浏览器要求绝对 URL 必须以 https:// 开头且结尾带 /，否则静默忽略。漏掉斜杠，Firefox 和 Opera 会把 css/app.css 拼成 https://cdn.example.com/v2css/app.css，路径被错误截断。
常见错误写法：href="https://cdn.example.com"（缺/）、href="//cdn.example.com"（协议相对，在某些旧环境不稳定）、href="cdn.example.com/v2/"（缺协议，被忽略）。
正确写法只有两种：
-
<base href="https://cdn.example.com/v2/">—— 明确、可控，推荐用于生产环境 -
<base href="//cdn.example.com/v2/">—— 协议相对，适合混合 HTTP/HTTPS 环境，但需确认目标 CDN 支持双协议
base 标签不改变 JS/CSS 中的资源请求路径
加了 <base href="https://cdn.example.com/v2/">，HTML 里的 <img src="logo.png"> 会去请求 https://cdn.example.com/v2/logo.png，但以下全部不受影响：
-
fetch('./api/data.json')—— 仍以当前页面 URL 为基准发起请求 -
import('./utils.js')—— 解析路径基于模块自身所在位置，不是base.href - CSS 文件中的
@import "reset.css"或background: url(avatar.jpg)—— 后者在 HTML 解析阶段受base影响，但前者完全由 CSS 引擎按文件位置解析
也就是说：<base> 是 HTML 解析器的规则，不是运行时的全局代理。别指望它让 fetch 或 import 也走 CDN。
多个 base 标签或构建工具重复注入会导致路径叠加
Vite 默认配置 build.base: "/subapp/" 会在生成 HTML 时自动插入 <base href="/subapp/">。如果你手动再加一个，浏览器只认第一个，第二个被丢弃；但更危险的是：Vite 的 base 配置 + 手动 <base> 可能导致资源路径被拼两次，比如最终请求 /subapp//subapp/js/app.js（注意双斜杠）。
排查方法：
- 打开 DevTools → Elements → 查看
是否存在多个<base> - Chrome 控制台可能提示
Multiple base elements detected. Only the first one is used. - 检查网络面板，看
bundle.js等资源是否发出了异常路径的请求
静态资源域名变更时，base href 和后端路由配置必须同步
设了 <base href="https://cdn.example.com/v2/">，但服务器没配好 CORS 或 CDN 没开启对应路径的访问权限，<script src="app.js"></script> 就会触发跨域错误或 403。
更隐蔽的问题是前端路由冲突：
- Vue Router 使用
createWebHistory('/subapp/')，但 HTML 里没配<base href="/subapp/">→ chunk 加载 404 - 只配了
<base href="/subapp/">，但 Vue Router 的base没设 →router.push('/home')跳转到根路径，白屏
关键点在于：<base> 和前端路由的 base 是两套独立机制，值必须严格一致，且都要生效——少一个，资源或路由就断一根弦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
