标签在单页应用部署到子路径时是硬性前提，必须写为 /myapp/ 或绝对 url；vue router/react router 需显式配置 base，否则路由跳转错误；构建工具与 不可共存；href="#section2" 在有 时会触发整页重载。
<base> 标签在单页应用里不是“可配可不配”的选项，而是部署到子路径（如 /myapp/）时的硬性前提；配错或漏配，静态资源 404、路由跳转错位、锚点刷新回顶，全都会静默发生——浏览器不报错，控制台也看不出异常。
base href 必须以 / 开头且结尾带斜杠
写成 /myapp 或 myapp/ 或 ../static 都会被浏览器直接忽略，且无任何提示。只有两种写法真正生效：
-
/myapp/：根相对路径，结尾斜杠不可省；否则 Firefox 会把css/app.css拼成/myappcss/app.css -
https://cdn.example.com/myapp/：绝对 URL，协议、域名、路径全明确，生产最稳
本地开发建议用 http://localhost:3000/ 而非 /，避免和后端路由规则冲突。
Vue Router / React Router v6+ 完全不读 document.baseURI
前端路由框架不会自动感知 <base href="/myapp/">，必须显式配置 base 路径：
- Vue Router：
createRouter({ base: '/myapp/' }) - React Router v6+：
<router basename="/myapp"></router>
漏配任一，router.push('/home') 就会跳到 https://example.com/home，而不是预期的 /myapp/home。HTML 中的 <base> 只管资源加载，路由跳转是另一套逻辑。
构建工具配置与 base 标签不可共存
Vite 的 build.base、Webpack 的 publicPath 和 HTML 中的 <base href="/myapp/"> 三者只要重复出现，就会导致路径被拼两次：
- Vite 已设
build.base: '/myapp/'，再手动加<base href="/myapp/">→ 请求变成/myapp//myapp/assets/index.js - Webpack
publicPath: '/'+<base href="/myapp/">→ chunk 加载地址为/myapp/js/app.js，但文件实际在/js/app.js，404
推荐策略：要么只靠构建工具统一控制（HTML 中不写 <base>），要么只靠 <base> 控制资源路径（构建工具设 publicPath: ""）。
href="#section2" 在有 base 时会触发整页重载
浏览器把 href="#section2" 当作相对路径处理，遇到 <base href="/myapp/"> 就解析成 /myapp/#section2，这被视为新 URL，触发导航重载。
- 现象：点击后页面闪一下、滚动回到顶部
- Network 面板能看到一次对
/myapp/的空请求（状态 200，返回完整 HTML） - 安全写法：
href={window.location.pathname + "#section2"}或new URL("#section2", document.baseURI).href - 更推荐：
event.preventDefault()+document.getElementById("section2").scrollIntoView()
最容易被忽略的是：首次加载带 hash（如 /myapp/page#faq）时，路由初始化可能早于 DOM 渲染，需手动检查 location.hash 并滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
