base href写成"../"或"./"会静默失效，浏览器仅接受以http://、https://、//或/开头且结尾带/的合法值（如"/subapp/"或"https://cdn.example.com/v3/"），否则所有纯相对路径资源均按当前页面url解析导致批量404。
base href 写成 "../" 或 "./" 会直接失效
浏览器解析 <base> 时，只要 href 值不以 http://、https://、// 或 / 开头，整条标签就被静默忽略——控制台零提示，但所有 <img src="logo.png"> 都回退到当前页面 URL 解析，上线后批量 404。
常见无效写法包括：
-
href="../static/"（含..，被丢弃） -
href="./css/"（相对路径，不合法） -
href="assets/"（缺协议和根斜杠，形同虚设） -
href="%PUBLIC_URL%/"（未被构建工具替换，原样发给浏览器，变成字面量）
真正有效的只有两种形式：href="/subapp/"（根相对路径，结尾必须带 /），或 href="https://cdn.example.com/v3/"（绝对 URL，最可控）。
多级子目录部署时 base 与前端路由必须手动对齐
<base href="/a/b/c/"> 只影响 HTML 中纯相对路径的资源加载（如 <script src="app.js"></script>），它**完全不改变** Vue Router、React Router v6+ 的行为。这些框架根本不读 document.baseURI，也不会自动适配子路径。
后果很直接：
- HTML 加了
<base href="/a/b/c/">，但 Vue Router 没配base: '/a/b/c/'→ 点击<routerlink to="/home"></routerlink>跳到https://example.com/home，而不是/a/b/c/home - React Router v6+ 忘了加
<router basename="/a/b/c"></router>→ 导航白屏或 404 - Webpack 的
publicPath: '/a/b/c/'和 HTML 中手写的<base href="/a/b/c/">同时存在 → 资源请求变成/a/b/c//a/b/c/js/app.js（双斜杠拼接）
base 标签位置错误或重复声明等于没写
<base> 必须是 中第一个元数据类标签，且只能有一个。放错位置或重复声明，浏览器要么忽略，要么只认第一个。
典型翻车场景：
- 写在
<title></title>或<link>后面 → 它前面的资源仍按原始页面 URL 解析 - 塞进
里 → 浏览器直接跳过，不报错也不生效 - SSR 模板中 header 和 page 各 render 一个 → 控制台提示
Multiple base elements detected. Only the first one is used.，但你可能根本没看到 - 用 JS 动态插入
<base>→ DOM 已开始解析，无法改变已加载资源的基准
哪些路径受 base 影响，哪些完全不受
<base> 只在 HTML 解析阶段起作用，改写的是“纯相对路径”（即不以 /、: 或协议开头）的初始解析逻辑。它不是运行时代理，更不介入 JS/CSS 执行过程。
✅ 明确受影响的：
<img src="logo.png"><script src="app.js"></script><link href="style.css">- CSS 中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响的：
fetch('./api/user')import('./utils.js')@import "reset.css"-
<iframe src="/admin/frame.html"></iframe>（根路径，直接拼域名） -
<img srcset="logo-2x.png 2x">（srcset不走base规则）
最容易被忽略的是：本地开发时用 href="http://localhost:3000/" 比用 href="/" 更安全；生产环境走 CDN，用完整绝对 URL 比根相对路径更可控。一旦写错，问题不会立刻暴露，而是等到部署到多级子目录时才集中爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
