base href值非法会导致资源批量404且无控制台报错，因其被浏览器静默丢弃；合法值仅限以/开头结尾的根相对路径（如/myapp/）或以http://、https://、//开头结尾带/的绝对url；排查需检查network中请求路径是否符合预期。
base href 值非法导致资源批量 404 却无控制台报错
浏览器对 <base href> 的校验是“全有或全无”：只要值不以 http://、https://、// 或 / 开头，整条标签就被静默丢弃——控制台不报错、Elements 面板里它还在，但 Network 面板里所有 <img src="logo.png">、<script src="app.js"></script> 都按当前页面 URL 解析，部署在子路径时必然批量 404。
常见非法写法包括：assets/、../static/、subapp/、%PUBLIC_URL%（未被构建替换时就是字面量）、/myapp（结尾缺斜杠）。
合法写法只有两种：/myapp/（根相对路径，开头和结尾都必须是 /）、https://cdn.example.com/v3/（绝对 URL，结尾必须带 /）。
排查方法：
打开 DevTools → Network → 刷新页面 → 看 JS/CSS/图片请求的发起 URL 是否符合你部署的实际路径；若请求地址明显不对（比如本该是 /myapp/js/app.js，却发了 /page/js/app.js），基本可断定 <base> 失效。
base 标签位置错误或重复导致锚点跳转触发页面重载
<base> 只对它之后出现的相对 URL 生效，且必须位于 最顶部、唯一存在。典型错误包括：<link href="main.css"> 写在 <base> 前 → CSS 已解析完毕，<base> 对它无效；<base> 写在 里 → 浏览器直接忽略；动态插入 document.head.appendChild(baseEl) → 解析阶段早已结束，完全无效。
更隐蔽的问题是锚点失效：<a href="#section2"></a> 在有 <base href="/myapp/"> 时会被拼成 /myapp/#section2，浏览器认为这是新 URL，于是重新加载 /myapp/，造成页面闪烁、滚动回顶、Network 面板里能看到一次状态码 200 的空 HTML 请求。
修复要点：
用 Ctrl+U 查看原始 HTML 源码，确认 <base> 是否位于 第一行且全文仅出现一次；
所有原生锚点链接必须配合 event.preventDefault() 拦截，默认行为不可靠；
不要依赖 href="#xxx" 实现滚动，改用 scrollIntoView() 或 window.scrollTo() 显式控制。
base 与前端路由配置不一致引发跳转错位
<base href="/myapp/"> 和 Vue Router 的 createWebHistory('/myapp/')、React Router 的 <router basename="/myapp"></router> 是两套独立机制，互不读取、互不校验。只配一个，另一个大概率出问题：
- 没配
<base href="/myapp/">→ chunk 加载 404（资源路径错） - 只配
<base href="/myapp/">，没设路由 base →router.push('/home')跳到根路径https://example.com/home，白屏 - Webpack/Vite 的
build.base或publicPath与<base href="/myapp/">同时存在且值相同 → 资源路径被拼两次，变成/myapp//myapp/js/app.js（注意双斜杠），必 404
关键细节：createWebHistory('/myapp/') 和 <base href="/myapp/"> 必须字面量完全一致（包括末尾斜杠）；
Vite 构建后生成的 HTML 通常已注入正确路径，手动再加 <base> 属于冗余操作，反而引入冲突风险。
哪些资源真受 base 影响，哪些完全不受控
<base> 只在 HTML 解析阶段起作用，只改写纯相对路径（既无协议、也无 / 开头）的硬编码属性。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。
✅ 真生效：<img src="logo.png">、<script src="app.js"></script>、<link href="style.css">、CSS 文件里的 background: url(icon.svg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受控：fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、<img srcset="logo-2x.png 2x">
⚠️ 半受影响：document.baseURI 会返回 <base href> 的值，可用于 new URL('data.json', document.baseURI)，但 window.location 和 document.URL 完全不变。
最容易被忽略的是：开发者常误以为 fetch() 或 import() 也会受 <base> 影响，结果在排查资源加载失败时绕远路——它们根本不会读 document.baseURI，路径必须自己写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
