spa部署到子路径必须配，因为html文件不在根目录时，相对路径资源（如script、img、link）会按当前url解析而404；可统一修正起点，但需与vue router的history配置、vite的build.base等严格对齐，否则导致路径重复或跳转异常。
为什么 SPA 部署到子路径必须配 <base>
因为单页应用（Vue/React）的 HTML 文件本身可能不在域名根目录下，比如部署在 https://example.com/myapp/index.html。此时页面里写 <script src="./assets/index.js"></script>，浏览器默认按当前 HTML URL 解析，会请求 https://example.com/myapp/assets/index.js——但实际资源可能发布在 /assets/index.js（即根路径下），或 CDN 上的 https://cdn.example.com/assets/index.js。不设 <base>，90% 的静态资源加载失败。
<base href="/myapp/"> 和构建工具配置必须对齐
只在 HTML 里加 <base href="/myapp/"> 不够，它只改 HTML 中硬编码的 src/href 解析，不影响 JS 动态加载、路由跳转、chunk 加载地址：
-
Vue Router必须同步设createWebHistory('/myapp/')，否则router.push('/home')会跳到https://example.com/home而非/myapp/home -
Vite构建时若已配build.base: '/myapp/'，HTML 中再手动写<base href="/myapp/">会导致路径被拼两次（如/myapp//myapp/assets/index.js） -
Webpack的publicPath若设为'/'，但 HTML 有<base href="/myapp/">，则 runtime chunk 会从/myapp/加载，而实际文件在/下，404
哪些资源受 <base> 影响，哪些完全不受
它只在 HTML 解析阶段生效，不是全局 URL 重写中间件：
- ✅ 受影响：
<img src="logo.png">、<link href="style.css">、<script src="main.js"></script>、<form action="api/login"></form>、CSS 中的background: url(icon.svg) - ❌ 完全不受：
fetch('./data.json')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、document.createElement('img').src = 'logo.png' - ⚠️ 半受影响：
document.baseURI返回<base href>值，可用于new URL('api/user', document.baseURI)；但window.location和document.URL完全不变
最容易被忽略的坑：href 值非法导致静默失效
浏览器对 href 校验极严，写错就直接忽略整条 <base>，且控制台不报错：
-
href="assets/"→ 缺协议和域名，被忽略 → 所有相对路径退回到页面 URL 解析 -
href="/myapp"→ 结尾缺/，Firefox/Chrome 可能拼接出https://example.com/myappstyle.css（漏斜杠） -
href="../static/"→ 含..，被忽略 - 正确写法只有两种：
href="https://cdn.example.com/myapp/"（推荐，明确可控）或href="/myapp/"（根相对，需确保部署环境一致）
真正难的不是写对 <base>，而是确认它是否生效——建议打开 DevTools 的 Network 面板，看第一个 script 请求地址是否符合预期。一旦发现资源 404 且路径不对，优先检查 <base href> 是否被静默丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
