base标签仅在html解析阶段生效，用于拼接纯相对路径资源；fetch、js模块导入等不识别它；href值须为绝对url或根相对路径；target属性影响form和iframe；spa部署需base标签、路由base、publicpath三者一致。
base 标签只在 HTML 解析阶段生效，不是全局路径代理
浏览器解析 HTML 时，遇到 <img src="logo.png"> 这类纯相对路径（不以 /、: 或协议开头），才会用 <base href="..."> 的值做一次拼接。拼完就丢，后续 JS 执行、CSS 加载、fetch 请求全不认它。
常见错误现象：
-
<base href="/app/">写了，但fetch('./api')仍发向当前页面 URL 下的/api，不是/app/api -
import('./utils.js')报 404，不是因为 base 没起作用，而是它本来就不该起作用 - Chrome DevTools 的 Network 面板里看到请求路径没变，别急着改 base——先确认那条请求是不是来自 HTML 属性
href 值必须是绝对 URL 或根相对路径，否则静默失效
浏览器对 href 值有硬性校验：只接受以 http://、https://、// 或 / 开头的字符串。其他写法一律忽略，不报错、不警告，但所有相对资源都会回退到按当前页面 URL 解析。
实操建议：
- ✅ 正确：
<base href="https://cdn.example.com/v3/">（推荐，跨环境稳定） - ✅ 正确：
<base href="/admin/">（注意结尾斜杠，Firefox 会截断无斜杠的/admin） - ❌ 无效：
<base href="static/">（缺协议和根斜杠） - ❌ 无效：
<base href="../assets">（含..，直接丢弃） - ❌ 有风险：
<base href="https://example.com/app">（结尾没/，可能拼成https://example.com/appcss/）
target 属性会影响 form 和 iframe，不只是 a 标签
<base target="_blank"> 看似只管链接，实际会让所有未显式声明 target 的交互元素继承该行为，包括 <form></form> 和 <iframe></iframe>。
容易踩的坑：
-
<form action="login.php"></form>提交后跳新页，用户无法返回原页面 -
<iframe src="embed.html"></iframe>加载失败或行为异常，因 base 的 target 干扰了 iframe 的上下文 - 第三方 UI 组件里的按钮如果生成了
<a></a>，也会被强制新窗口打开，且老版浏览器不自动加rel="noopener"，存在安全风险
SPA 部署子路径时，base 标签和前端路由必须配对，缺一不可
Vue Router 的 base: '/subpath/' 和 HTML 中的 <base href="/subpath/"> 是两套独立机制，各自负责不同环节：
- 只设
<base href="/subpath/">：JS chunk 能加载，但router.push('/home')会跳到/home（根路径），不是/subpath/home - 只设 Vue Router
base：路由跳转正常，但<script src="index.js"></script>404（浏览器按当前页 URL 解析，找不到/index.js，实际在/subpath/index.js） - 微前端场景下还要对齐 Webpack 的
publicPath，三者错位会导致路径变成/subpath/subpath/js/app.js
真正麻烦的不是配置本身，而是构建产物、CDN 缓存、Service Worker 预缓存路径全部依赖这个前缀的一致性——漏掉一个环节，就出现资源加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
