HTML中Base标签处理复杂路径嵌套的潜在风险预警
base href写成相对路径会静默失效；浏览器忽略非法值（如"assets/"、"../static"），所有纯相对URL仍按当前页面URL解析，导致404，仅绝对URL或结尾带斜杠的根相对路径（如"/myapp/"）有效。
base href 写成相对路径会静默失效
浏览器遇到 <base href="assets/"> 或 <base href="../static"> 这类写法，直接跳过整个标签——不报错、不警告，但所有 <img src="logo.png"> 都按当前页面 URL 解析，404 风险极高。
真正有效的只有两种形式：
-
href="https://cdn.example.com/v3/"（绝对 URL，推荐用于 CDN 场景） -
href="/myapp/"（根相对路径，结尾必须带/，否则 Firefox 会截断）
常见翻车点：href="../static/"、href="css/"、href="%PUBLIC_PATH%/"（未被构建工具替换时就是字面量字符串）全部无效。
fetch 和 import() 也会受 base 影响但常被忽略
<base> 不只改 <img> 和 <link>，它在 HTML 解析阶段统一重写所有纯相对 URL 的解析基准。这意味着：
立即学习“前端免费学习笔记（深入）”；
-
fetch('./api/user')实际请求地址变成https://example.com/api/user（而非同目录） -
import('./utils.js')报TypeError: Failed to resolve module specifier -
new Image().src = 'icon.png'加载失败，请求的是根路径下的文件
但以下不受影响：window.location、history.pushState()、内联 JS 字符串拼接的 URL（如 el.src = 'data.png'），它们只是字符串，不参与 URL 解析。
SPA 路由与 base href 不同步就必然出问题
Vue Router 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，不自动同步。只设一个，另一个大概率出问题：
- HTML
<base href="/subpath/">设了，但 Vue Router 没配base: '/subpath/'→router.push('/home')跳到根路径 - React Router v6+ 同样必须显式传入
basename，否则导航行为错位 - Service Worker 缓存策略若依赖
self.location.origin + '/subpath/'，而 HTML 没配<base>，预缓存路径就错位
微前端场景下更危险：子应用同时设了 Webpack publicPath 和 <base>，资源路径可能被拼两次，变成 /subpath/subpath/js/app.js。
调试时 Network 面板里看请求地址最可靠
遇到资源 404 或跨域失败，别猜，直接打开开发者工具 Network 面板，点开失败请求，看 实际发出的 URL 是什么：
- 如果
<img src="logo.svg">请求的是https://example.com/logo.svg，但你预期是/static/logo.svg，说明<base>生效了且值不对 - 如果请求地址没变，仍为当前页面同级路径，说明
<base>被浏览器静默忽略了（大概率 href 写法非法） - 检查 HTML 源码，确认
<base>是否在<head>最顶部、是否唯一、是否被模板引擎重复注入
构建工具（Vite 的 build.base、Webpack 的 output.publicPath）比手写 <base> 更可靠，因为它们重写所有生成路径，而不是靠浏览器运行时解析——这点容易被忽略，但恰恰是多数线上问题的根源。
