base href 写错值会导致所有相对资源 404且不报错；仅 href="/myapp/"（根相对路径，结尾必须带/）和 href="https://cdn.example.com/v3/"（绝对url）有效；前端路由需显式配置base参数，与无关；构建工具与混用会引发双斜杠导致404；fetch、import()等运行时路径不受控制。
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%"（未被构建工具替换时就是字面量）。真正有效的只有两种：
-
href="/myapp/"—— 根相对路径，结尾必须带/，否则 Firefox/Opera 会截断（如css/app.css变成/myappcss/app.css） -
href="https://cdn.example.com/v3/"—— 绝对 URL，协议、域名、版本全明确，不依赖当前页上下文
前端路由和 Base 标签是两套独立机制，不自动同步
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不读 document.baseURI，必须显式配置 base 参数，否则导航行为割裂：
- Vue Router：
createRouter({ base: '/myapp/' })，否则router.push('/home')跳到根路径 - React Router v6+：
<router basename="/myapp"></router>，否则匹配和跳转全部错位 - 若 HTML 中写了
<base href="/myapp/">但路由没配base，资源加载走/myapp/js/app.js，而点击链接却跳到/home，行为不一致
构建工具的 publicPath/base 和 HTML 的
Webpack/Vite 的 build.base 或 publicPath 若与 HTML 中的 <base href="/myapp/"> 值重复，会导致资源路径被拼两次：
- 预期：
/myapp/js/app.js - 实际：
/myapp//myapp/js/app.js（注意中间两个//） - 后果：静态资源 404，Service Worker 预缓存失败，微前端子应用 chunk 加载中断
构建工具生成的 HTML 通常已注入正确路径，手动再加 <base> 属于冗余操作，反而引入冲突风险。
JS/CSS 中的相对路径不受
<base> 只在 HTML 解析阶段起作用，它不重写运行时构造的 URL：
- ✅ 受控：
<img src="logo.png">、<link href="style.css">、CSS 中background: url(avatar.jpg) - ❌ 不受控：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、CSS@import "reset.css" - ⚠️ 半受控：
document.baseURI返回<base href>值，可用于new URL('data.json', document.baseURI)，但window.location和history.pushState()完全不受影响
最易踩坑的是 fetch('./xxx') 和动态 import()：它们仍以当前 JS 文件位置为基准，不是 <base> 所设路径，调试时 Network 面板看到的请求地址可能和预期不符。
<base>”，而是所有路径是否语义统一——静态资源、API 请求、前端路由、构建输出，都得指向同一套部署前缀。硬塞 <base> 是补丁，不是设计。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
