标签在复杂网络环境下极易失效，必须使用带尾斜杠的绝对url或根相对路径，否则浏览器静默忽略；它影响html资源和css url()，但不影响js模块导入，fetch等api则部分受影响；spa需路由、构建配置与三者严格对齐。
<base> 标签在复杂网络环境下（比如 CDN、多级子路径部署、混合协议、file:// 本地调试）极易失效，不是“加了就能用”，而是“写错就静默挂掉”——浏览器不报错、控制台无提示、资源批量 404，问题往往到上线才暴露。
为什么 <base href> 在 CDN 或子路径下经常 404
根本原因：href 值必须是绝对 URL（https://cdn.example.com/v3/）或根相对路径（/myapp/），且结尾必须带斜杠 /。任何偏差都会被浏览器静默丢弃。
-
<base href="assets/">→ 缺协议和根斜杠，无效；后续<img src="logo.png">仍按当前页面 URL 解析 -
<base href="/myapp">→ 结尾没/，Firefox 可能截断成/myappcss/，导致style.css请求错位 -
<base href="../static/">→ 含..，所有浏览器直接忽略 -
<base href="%PUBLIC_PATH%">→ 没经构建工具替换，浏览器收到字面量字符串，无效
<base> 不影响 JS 运行时路径，但会悄悄破坏 fetch 和 CSS url()
很多人以为只改 HTML 资源就够了，其实 <base> 的作用范围比想象中广，也更隐蔽：
- ✅ 影响：
<img src="a.png">、<link href="main.css">、<form action="submit.php"></form>、CSS 中的background: url(b.jpg) - ❌ 不影响：
fetch("./api/data")、import("./utils.js")、new Worker("worker.js")、@import "reset.css" - ⚠️ 半影响：
fetch("api/users")会被解析为/myapp/api/users（如果base href="/myapp/"），但你代码里没写协议也没写/，它就中招了
所以常见翻车：加了 <base href="/admin/"> 后，页面图片正常，但 AJAX 全部 404，排查半天才发现是 fetch("api/list") 被重写了。
SPA 部署时，<base> 必须和路由、构建配置三者对齐
单页应用在子路径（如 https://example.com/app-v2/）下，光配 <base href="/app-v2/"> 远远不够：
- Vue Router 必须显式传
base: '/app-v2/'，否则router.push('/home')会跳到根路径 - React Router v6+ 必须用
<router basename="/app-v2"></router>，否则匹配和导航全乱 - Vite 的
build.base和 HTML 中的<base href>不能同时设相同值，否则路径拼两次（/app-v2//app-v2/js/index.js） - Webpack 的
publicPath若设为/app-v2/，HTML 就不该再手动写<base>，否则重复
本地开发用 http://localhost:5173/ 作 base 更安全，能避免和后端代理规则冲突；生产环境走 CDN，优先用完整绝对 URL（https://cdn.example.com/v2.4/），而非根相对路径。
file:// 协议下 <base> 几乎不可靠
直接双击打开 HTML 文件（file:// 协议），Chrome、Edge 等现代浏览器会静默忽略 <base href>，哪怕它语法完全正确。
-
<base href="/assets/">→ 被忽略，<script src="js/app.js"></script>仍尝试从磁盘根目录找C:/js/app.js -
<base href="https://cdn.example.com/">→ 有效，但仅限于跨域可访问资源，本地调试时通常不可行
这意味着：本地测试通过 ≠ 上线可用。真正验证 <base> 是否生效，必须在 HTTP(S) 服务下运行，并检查 DevTools Network 面板中请求的实际 URL —— 不要看代码里怎么写的，要看浏览器到底发了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
