base href必须以/、https://、http://或//开头，否则静默失效；仅影响html解析阶段其后纯相对路径，须置于最前且唯一，与前端路由及构建配置严格对齐。
base href 必须以 /、https://、http:// 或 // 开头，否则静默失效
浏览器对 base 的 href 值做严格前缀校验：只要不是这四种开头，整个 <base> 标签就被丢弃——控制台不报错、不警告，但所有后续相对路径仍按当前页面 URL 解析，上线后批量 404。
常见翻车写法：href="assets/"、href="../static/"、href="cdn/v2"、href="https://example.com"（结尾缺 /）。
真正安全的写法只有：
-
href="https://cdn.example.com/v3/"✅ 协议+域名+路径，CDN 场景首选 -
href="/myapp/"✅ 根相对路径，结尾斜杠不能少（Firefox 会截断/myappcss/） -
href="//cdn.example.com/v3/"✅ 协议相对，自动继承当前页 http/https
base 只在 HTML 解析阶段生效，且只影响它之后出现的纯相对 URL
<base> 不是全局代理，而是 HTML 解析器在读取文档时的一次性“基准重置动作”。它只对它之后、且未被解析过的标签中符合规则的属性值起作用。
错误顺序示例：<link href="main.css">
<base href="/app/"> → main.css 已完成解析，<base> 对它完全无效。
正确位置必须是 内最靠前的元数据类标签之一，早于 <title></title>、<meta>、<link>、<script></script> 等。
以下行为均无效：
- 把
<base>放进→ 浏览器直接忽略 - 用 JS 动态插入（如
document.head.appendChild()）→ 解析阶段早已结束 - 多个
<base>→ 只有第一个生效，其余被静默丢弃
哪些属性真受影响，哪些完全不受 base 控制
<base> 的作用域非常窄：仅限 HTML 解析时硬编码在标签上的纯相对 URL（即不以 /、: 或协议开头的字符串）。
✅ 真正受影响的：
<img src="icon.png"><script src="app.js"></script><link href="style.css"><a href="about.html"></a>- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析 CSS 文件路径时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响的：
-
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js') - CSS 中的
@import "reset.css"、srcset="logo-2x.png 2x" -
<iframe src="/admin/frame.html"></iframe>（根相对路径，直接拼到域名下） -
document.createElement('img').src = 'logo.png'（JS 运行时赋值） -
element.style.backgroundImage = "url(bg.jpg)"（内联样式走 CSS 规则）
SPA 部署子路径时，base 和构建工具/路由配置容易冲突
当部署到子路径（如 https://example.com/a/b/c/）时，<base href="/a/b/c/"> 和前端框架的配置必须对齐，否则资源加载或路由跳转会割裂。
典型冲突点：
- Vite 构建已设
base: '/a/b/c/'，HTML 中再手动加<base>→ 资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Webpack 的
publicPath和手写的<base href="/a/b/c/">若值相同，也可能重复拼接 - Vue Router / React Router v6+ 不读
document.baseURI，需显式传入base: '/a/b/c/' - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>→ 预缓存路径错位
本地开发建议用 href="http://localhost:3000/" 而非 href="/"，避免和后端路由冲突；生产环境走 CDN 时，用完整绝对 URL 比根相对路径更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
