base标签通过设置href属性为绝对url或根相对路径，使html中所有纯相对路径资源自动拼接前缀；但以/、http://、https://开头的路径及js动态路径均不受影响。
base标签怎么让HTML里不用写重复路径
它不是“减少代码量”的语法糖，而是浏览器在解析 HTML 时，对所有纯相对路径（如 logo.png、style.css）自动拼上前缀的一次性重定向。你写一次 <base href="/assets/">，后面所有 <img src="icon.svg"> 就自动变成从 /assets/icon.svg 加载，不用每个标签都补全前缀。
-
<img src="logo.png">→ 解析为https://example.com/assets/logo.png（假设当前域是 example.com） -
<link href="css/main.css">→ 解析为https://example.com/assets/css/main.css - 但
<img src="/img/avatar.jpg">（以/开头）或<img src="https://cdn.com/i.png?x-oss-process=image/resize,p_40">（含协议）完全绕过<base>，不受影响
为什么href值写错就等于没写
浏览器对 <base href="..."> 的校验非常严格：只要 href 不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台不报错，开发者工具 Network 面板里资源仍按原始页面 URL 请求，结果就是批量 404。
-
<base href="static/">❌ 缺协议和根斜杠，无效 -
<base href="../dist/">❌ 含..，被忽略 -
<base href="https://cdn.example.com/v2">❌ 结尾没/，Firefox 可能截成https://cdn.example.com/v2css/ -
<base href="https://cdn.example.com/v2/">✅ 推荐，绝对 URL 最可控 -
<base href="/app/">✅ 合法，但部署路径改了就得同步改
哪些路径会被base改，哪些根本不会动
<base> 只管 HTML 解析阶段硬编码在属性里的纯相对路径，其他统统不管。混淆这点是线上 404 的最大原因。
- ✅ 真正受影响：
<img src="a.png">、<script src="app.js"></script>、<form action="post.php"></form>、CSS 文件中background: url(b.jpg)（注意：这是 HTML 解析 CSS 文件路径时计算的） - ❌ 完全不受影响：
fetch('./api')、import('./utils.js')、@import "reset.css"、new Worker('./w.js')、<iframe src="page.html"></iframe> - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA 部署子路径时 base 标签必须和路由/构建配置对齐
Vue Router 的 base: '/sub/'、Vite 的 build.base、Webpack 的 publicPath 和 HTML 中的 <base href="/sub/"> 是四套独立机制，缺一或错一对，就会出现“跳转正常但 JS 404”或“JS 加载成功但点击链接跳到根路径”这类割裂问题。
- 只设
<base href="/sub/">：脚本、样式能加载，但router.push('/home')跳到/home（不是/sub/home） - 只设 Vue Router
base：路由跳转正常，但<script src="index.js"></script>请求/index.js→ 404（实际应在/sub/index.js） - Vite 项目已配
build.base: '/sub/'，再手动加<base href="/sub/">→ 资源路径可能被拼两次，变成/sub//sub/js/app.js - Service Worker 缓存策略若写死
self.location.origin + '/sub/'，但 HTML 没配<base>，预缓存路径就错位
最麻烦的不是写错某一行，而是构建产物、CDN 缓存、Service Worker 预缓存、前端路由这四个环节的路径前缀必须完全一致——漏掉一个，资源就加载失败，且往往没有明确报错，只能靠 Network 面板逐个比对请求地址。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
