base href写错会导致静态资源404但路由看似正常，因浏览器严格校验其值必须以/、http://、https://或//开头，否则静默丢弃；vue/react router需显式配置base/basename且不继承document.baseuri；fetch、import等js行为完全绕过base影响。
base href 写错会导致静态资源 404，但路由跳转看起来“正常”
浏览器对 <base href> 的校验极严：只要值不是以 /、http://、https:// 或 // 开头，整条标签就被丢弃，且不报错、不警告。常见错误如 href="assets/"、href="subapp/"、href="../static/"，全部静默失效。
此时你可能发现：<script src="app.js"></script> 请求的是当前页面 URL 下的相对路径（比如 https://example.com/subapp/app.js），而非预期的 /subapp/app.js；而 Vue Router 的 router.push('/home') 却能跳到 /subapp/home——这容易误判为“base 没问题”。其实这只是框架内部用 window.location.pathname 做了路径拼接，和 <base> 完全无关。
- 验证是否生效：打开 DevTools → Console → 输入
document.baseURI，看返回值是否为你写的 href 值 - 若返回的是当前页面完整 URL（如
https://example.com/subapp/index.html），说明<base>已被忽略 - 资源 404 通常出现在
<img src="logo.png">、<link href="style.css">、CSS 中的background: url(avatar.jpg)
Vue Router / React Router v6+ 完全不读 document.baseURI
无论你写没写 <base href="/myapp/">，Vue Router 的 createRouter({ base: '/myapp/' }) 和 React Router v6+ 的 <router basename="/myapp"></router> 都必须显式配置。它们不解析、不继承、不 fallback 到 document.baseURI。
漏配或配错会直接导致：router.push('/home') 跳到根路径 /home，而不是 /myapp/home；<link to="/about"> 渲染出的 href 属性也是 /about，点击后刷新页面就 404。
- Vue Router：base 值必须与 HTML 中
<base href>的值完全一致（包括结尾斜杠） - React Router v6+：
basename不带开头斜杠，但必须和部署子路径严格对齐（basename="myapp"对应<base href="/myapp/">） - 服务端 Nginx/Apache 必须配 fallback：所有非 API 路径返回
index.html，否则直接访问/myapp/about仍会 404
fetch、import、动态创建元素完全绕过 base
<base> 只在 HTML 解析阶段起作用，只改写纯相对路径（即不以 /、:、协议开头的字符串）。JS 运行时行为不受任何影响。
这意味着：fetch('./api/user') 发起的是相对于当前页面 URL 的请求（如 https://example.com/subapp/ + ./api/user → /subapp/api/user），而不是相对于 <base href="/myapp/">；import('./utils.js') 同理；document.createElement('img').src = 'icon.png' 也按当前页面 URL 解析。
- 不要指望
<base>统一控制 API 路径——后端路由、构建 publicPath、JS 中 fetch 地址需各自对齐 - CSS 中的
@import "reset.css"不受<base>影响，但background: url(avatar.jpg)会受影响（因为这是 HTML 解析时计算的） - 动态插入的
<script src="app.js"></script>也不走<base>，它按执行时的文档上下文解析
构建工具 publicPath 和 base href 同时存在易引发双重拼接
Webpack 的 output.publicPath 和 Vite 的 build.base 会在构建时重写所有静态资源引用（<script></script>、<link>、<img> 等）。如果你又手动在 HTML 中加了 <base href="/myapp/">，且两者值相同，就可能出现路径重复：
例如 publicPath = '/myapp/' + <base href="/myapp/"> → <script src="js/app.js"></script> 最终请求 /myapp//myapp/js/app.js（双斜杠导致 404）。
- Vite 项目：设
build.base = '/myapp/'后，HTML 中**不该再手动加**<base>标签 - Webpack 项目：若用
HtmlWebpackPlugin，可通过templateParameters注入<base href="%7B%7B%20publicPath%20%7D%7D">，确保二者值同步 - 手写 HTML + 构建产物：优先让构建工具生成最终 HTML，避免人工维护
<base>，减少错位风险
最常被忽略的点是：CSS 里的 url() 函数受 <base> 影响，但开发者往往只盯着 HTML 标签里的 src 和 href。上线前务必检查背景图、字体、SVG 引用是否都正确加载——它们比 JS 报错更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
