base href 写错会导致所有相对资源404且浏览器不报错；仅以http://、https://、//或/开头才生效，需与前端路由base配置及构建工具publicpath严格对齐，否则引发路径错乱。
Base href 写错值会导致所有相对资源 404，且浏览器不报错
浏览器对 <base href> 的校验极其严格：只要值不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——不警告、不报错，后续所有 <img src="logo.png">、<script src="app.js"></script> 全部按当前页面 URL 解析，极易批量 404。
常见无效写法包括：href="assets/"、href="../static/"、href="subapp/"、href="%PUBLIC_PATH%/"（未被构建工具替换时就是字面量）。这些都会让 <base> 形同虚设。
真正合法的只有两种形式：
-
href="https://cdn.example.com/v3/"（绝对 URL，推荐用于 CDN 场景） -
href="/myapp/"（根相对路径，结尾斜杠 不能少；否则 Firefox/Opera 会截断路径，如js/app.js拼成/myapp/js/app.js变成/myapp/js/app.js）
Base 和前端路由配置必须显式对齐，否则跳转和资源加载行为割裂
<base href="/a/b/c/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径——它们完全不读 document.baseURI，必须手动传入 base 配置项。
若 HTML 中写了 <base href="/a/b/c/">，但路由没配 base：
-
router.push('/home')会跳到https://example.com/home（而非/a/b/c/home） -
<img src="logo.png">却加载https://example.com/a/b/c/logo.png - 结果是“一半走 base、一半走根”，行为不可预测
对应配置必须严格一致：
- Vue Router：
createRouter({ base: '/a/b/c/' }) - React Router v6+：
<router basename="/a/b/c/"></router>
Base 与构建工具 publicPath/base 配置重复，资源路径会被拼两次
Webpack 的 publicPath 或 Vite 的 base 配置，如果和 HTML 中手写的 <base href="/a/b/c/"> 值相同，会导致资源路径被叠加两次。
例如：
- Vite 已设
build.base = '/a/b/c/'，生成的<script src="js/app.js"></script>实际已是/a/b/c/js/app.js - 再加
<base href="/a/b/c/">，浏览器会把js/app.js解析为/a/b/c//a/b/c/js/app.js（注意双斜杠）
解决办法很直接：Vite 或 Webpack 已配 base 时，HTML 中就不该再手动加 <base> 标签。
Base 对 fetch/import/srcset 等完全无效，但开发者常误以为它全局生效
<base> 只影响 HTML 解析阶段的纯相对属性值，JS/CSS 运行时构造的 URL 完全不受控。这是线上问题最隐蔽的来源之一。
✅ 受控（解析时重定向）：<img src="logo.png">、<script src="app.js"></script>、CSS 中的 background: url(avatar.jpg)
❌ 不受控（仍按当前页面或模块位置解析）：
-
fetch('./api/user')→ 仍以当前页面 URL 为基准 -
import('./utils.js')→ 以该 JS 文件自身位置为基准 -
<img srcset="logo-2x.png 2x">→srcset不走 base 规则 -
<iframe src="/admin/frame.html"></iframe>→ 根相对路径，直接拼域名，跳过 base
尤其要注意：CSS 文件里的 @import "reset.css" 也不受 <base> 控制，它始终相对于 CSS 文件所在路径解析。
真正容易被忽略的是——<base> 不是“加前缀”，而是重置整个 HTML 解析器对相对 URL 的起点；设错一个字符，<img src="logo.png"> 就 404，且你很难从控制台发现原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
