标签是决定资源加载成败的关键开关，仅在 html 解析阶段生效，只影响硬编码的纯相对路径，配错或漏配将导致上线后大量 404。
<base> 标签不是部署时“顺手加一下”的可选项，而是决定资源加载成败的关键开关。它只在 HTML 解析阶段生效，且仅作用于硬编码的纯相对路径（如 src="app.js"），对 JS 运行时行为（fetch、import()、new URL()）完全无感。配错或漏配，上线后必现大量 404。
为什么 <base href="/subpath/"> 必须结尾带斜杠
Firefox 和 Opera 会截断不带尾斜杠的值：比如 <base href="/myapp"> + css/main.css → 实际拼成 /myappcss/main.css，直接 404。Chrome 虽容忍，但跨浏览器一致性必须靠结尾斜杠保障。
常见错误写法：
-
<base href="static/">（缺协议和根斜杠，静默失效） -
<base href="../assets">（含..，被浏览器丢弃） -
<base href="https://example.com">（结尾无/，Firefox 截断风险）
✅ 推荐写法：<base href="/subpath/"> 或 <base href="https://cdn.example.com/v3/">
<base> 和前端路由（如 Vue Router / React Router v6+）必须双配
二者职责完全不同，缺一不可：
-
<base href="/subpath/">确保<script src="index.js"></script>加载到/subpath/index.js -
base: '/subpath/'在路由配置中确保router.push('/home')解析为/subpath/home，而非根路径/home
只设其一的后果：
- 只配
<base>：JS/CSS 加载正常，但所有路由跳转都错位到根路径 - 只配路由
base：跳转正常，但 chunk、logo.png、style.css 全部 404
构建工具（Vite/Webpack）和 <base> 别重复设置
Vite 的 build.base 或 Webpack 的 publicPath 已在打包时重写所有资源路径，此时再手动写 <base href="/subpath/"> 会导致路径叠加：
/subpath/（构建工具） + /subpath/（<base>） + js/app.js → /subpath/subpath/js/app.js
实操建议：
- Vite 项目：用
build.base: '/subpath/'，HTML 中**不要**再写<base> - Webpack 项目：若已设
publicPath: '/subpath/'，也应避免重复声明<base> - 纯静态 HTML + 手动部署：必须显式写
<base href="/subpath/">，且确保所有src/href都是纯相对路径
<base target="_blank"> 是隐蔽的交互破坏者
它不只是让链接新窗口打开，还会全局影响：
-
<form action="submit.php"></form>提交后强制跳转新页（即使没写target） -
<iframe src="embed.html"></iframe>加载行为也被接管 - 第三方组件里没声明
target的<a></a>全部意外新窗口打开
更危险的是：target="_blank" 若未配 rel="noopener"，存在安全漏洞（老版本浏览器可被恶意页面控制 window.opener）。除非明确需要，否则别用 <base target>。
真正麻烦的从来不是怎么写 <base>，而是它只改 HTML 解析那一刻的路径起点，却要和构建产物、CDN 缓存、Service Worker 预缓存、前端路由、甚至后端 fallback 路由全部对齐——漏掉任一环，资源就断在用户浏览器里，而控制台不会报错，只会安静地返回 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
