后台管理系统模板必须显式配置<base href>，因其是SPA部署在子路径时资源加载的必要前提：不配或配错导致大量404；配对但未同步前端路由（如Vue Router的base或React Router的basename）则引发跳转断链与白屏。
<base> 在后台管理系统模板中不是“可选优化”，而是部署阶段的路径纠错开关——不配或配错，上线后立刻大量 404；配对但没协同前端路由，页面跳转就断链。
为什么后台管理系统模板必须显式配置 <base href>
后台管理系统几乎全是单页应用（SPA），构建产物（index.html、assets/js/app.js、assets/css/style.css）通常打包成静态文件，部署在非根路径下：比如 https://admin.example.com/ops/ 或 https://example.com/admin-v2/。此时 HTML 文件本身位于 /ops/index.html，但默认情况下浏览器会以该 URL 为基准解析所有相对路径 —— 导致 <script src="assets/js/app.js"> 被请求为 https://admin.example.com/ops/assets/js/app.js（正确），而如果构建时设了 publicPath: "/admin-v2/"，实际资源却在 /admin-v2/assets/...，这时不加 <base href="/admin-v2/">，所有脚本、样式、图片全 404。
常见错误现象：
- 本地
npm run serve正常，一部署到 Nginx 的/admin/子目录，控制台刷屏Failed to load resource: the server responded with a status of 404 () - Vue Router 页面能加载，但点击菜单跳转后白屏，Network 面板里
chunk-xxx.js返回 404 - 图标、logo 图片显示为红叉，
src="i/logo.png"实际发请求到了/admin/i/logo.png（错误），而真实路径是/admin-v2/i/logo.png（正确）
<base href> 的合法值怎么写才不被浏览器静默忽略
浏览器对 href 值极其苛刻：只要不符合绝对 URL 或根相对路径规范，整条 <base> 就被丢弃，且不报任何警告。你看到的“好像没生效”，其实是它根本没被识别。
立即学习“前端免费学习笔记（深入）”；
必须满足以下全部条件：
- 以
http://、https://、//或/开头 - 如果是根相对路径，结尾**必须带斜杠**（
/admin/✅，/admin❌）—— Firefox/Opera 会把/admin+css/app.css拼成/admincss/app.css - 不能含
..、不能是纯相对路径（如static/、./assets/） - 不能拼接查询参数或 hash（
/admin/?v=2、/admin/#top全部无效）
生产环境推荐写法：<base href="https://cdn.example.com/admin-v2/">（CDN 场景最稳）；子路径部署且无 CDN 时：<base href="/admin-v2/">（注意结尾斜杠）。
后台管理系统模板中 <base> 和前端路由（Vue Router / React Router v6+）必须配对
<base href="/admin/"> 只管资源加载，不管页面跳转逻辑。Vue Router 的 router.push('/dashboard') 默认推送到根路径 /dashboard，除非你告诉它：“我的整个应用挂载在 /admin/ 下”。这两者完全独立，缺一不可。
实操要点：
- Vue Router 必须显式配置
base: '/admin/'（createRouter({ history: createWebHistory('/admin/'), ... })） - React Router v6+ 必须传
basename="/admin/"给<Router> - Webpack/Vite 构建配置中的
publicPath或build.base**必须和<base href>值一致**；否则资源路径被拼两次（如/admin//admin/js/app.js） - Service Worker 缓存清单若用
self.location.origin + '/admin/'生成路径，HTML 中没配<base href="/admin/">，缓存的就是错的地址
哪些资源根本不受 <base> 影响，后台管理系统里要特别注意
后台管理系统重度依赖异步数据加载和动态模块，而这些能力恰恰绕过 <base>：
-
fetch('./api/users')→ 仍按当前页面 URL 解析，即https://admin.example.com/ops/api/users，不是/admin-v2/api/users -
import('./views/Report.vue')→ Webpack/Vite 会按自身publicPath处理，但若你手动写路径又没配好，可能加载失败 - CSS 中的
@import "theme.css"→ 不受控，仍按 CSS 文件所在路径解析 -
new Worker('./worker.js')→ 同样不走<base>，得靠Worker(new URL('./worker.js', import.meta.url))显式构造
最容易被忽略的是：你在 main.js 里写了 axios.defaults.baseURL = './api'，以为能继承 <base>，其实不能 —— 这个 ./api 依然从 HTML 当前 URL 解析，不是从 <base href> 解析。
