正确做法是本地用<base href="http://localhost:3000/">、生产用完整CDN地址如<base href="https://cdn.example.com/v2.3/">；/subpath（无尾斜杠）会导致Firefox拼接路径错误为/subpathcss/app.css，必须写为/subpath/；Vite/Webpack已重写资源路径，再手动加<base>会引发双斜杠404；<base>仅影响HTML解析阶段的相对URL构造，不影响JS模块导入等。
本地开发用 <base href="http://localhost:3000/">，生产环境用完整 CDN 地址如 <base href="https://cdn.example.com/v2.3/">——别用 / 或 /subpath 这类不带协议也不带结尾斜杠的值，否则 Firefox 会截断拼接路径，404 无声无息。
为什么 <base href="/subpath"> 比 <base href="/subpath/"> 更危险
浏览器对 href 值校验极松：只要不是以 http://、https://、// 或 / 开头，就直接忽略整条 <base>；而以 /subpath（无尾斜杠）开头的值，在 Firefox 和 Opera 中会被当成“不完整根路径”，后续所有相对路径拼接时，会把 css/app.css 错拼成 /subpathcss/app.css。
- ✅ 正确写法：
<base href="/subpath/">（结尾必须有/） - ✅ 更推荐：
<base href="http://localhost:3000/">（本地）或<base href="https://cdn.example.com/v2.3/">（生产） - ❌ 危险写法：
<base href="/subpath">、<base href="subpath/">、<base href="./">
<base> 和构建工具（Vite/Webpack）的冲突点
Vite 的 build.base 或 Webpack 的 publicPath 已在打包时重写了所有静态资源路径（如 js/app.js → /admin/js/app.js），此时再手动加 <base href="/admin/">，浏览器会在解析阶段二次拼接，导致路径变成 /admin//admin/js/app.js —— 双斜杠触发 404，且 Network 面板里看到的请求地址已经错了。
- Vite 项目中，设了
build.base = "/assets/"，就不要再手写<base>标签 - Webpack 项目中，若用了
HtmlWebpackPlugin，确保output.publicPath与部署路径一致，插件会自动重写<script>和<link>，无需额外<base> - 手写的
<img src="logo.png">不受构建工具影响，得改用import logo from './logo.png'; <img src={logo}>或new URL('./logo.png', import.meta.url)
<base> 对 JS 运行时行为的真实影响范围
它只在 HTML 解析阶段生效，不影响 JS 执行逻辑，但会悄悄改变运行时构造 URL 的基准：
立即学习“前端免费学习笔记（深入）”；
- ✅ 受影响：
fetch('./api/user')、new Image().src = 'icon.png'、XMLHttpRequest.open('GET', 'data.json')、CSS 中background: url(avatar.jpg) - ❌ 完全不受影响：
import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="page.html"> - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)，但window.location和document.URL完全不变
最容易被忽略的是：本地开发时用 http://localhost:3000/ 而非 /，能彻底避开后端路由代理冲突；而生产环境走 CDN，用完整绝对 URL 才可控——因为 <base> 一旦设错，所有相对路径加载都会静默失败，Network 面板里看不到任何报错提示，只有 404 请求安静躺在列表底部。
