base href="/subapp/"是唯一合法的子路径写法，必须以/开头且结尾带/，否则标签被静默丢弃导致批量404；它仅影响html中纯相对路径（如src="logo.png"），不影响fetch、import、@import及前端路由，vue/react router需显式配置base/basename，且不可与webpack/vite的publicpath/base共存。
base href="/subapp/" 是唯一合法的子路径写法
浏览器对 <base> 的 href 值校验极严：必须以 / 开头、且结尾必须带 /，否则整条标签被静默丢弃——控制台零提示，但所有 <img src="logo.png">、<script src="app.js"></script> 全部回退到当前页面 URL 解析，批量 404。
常见错误包括：href="/subapp"（缺尾斜杠）、href="subapp/"（缺根斜杠）、href="../static/"（含 ..）、href="%PUBLIC_URL%/"（未被构建工具替换）。
真正可用的只有两种形式：
-
href="/subapp/"—— 根相对路径，部署到不同子路径时需同步修改 HTML 和路由配置 -
href="https://cdn.example.com/subapp/"—— 绝对 URL，CDN 场景最稳，避免协议/路径歧义
Vue Router / React Router v6+ 必须显式配 base，不读 document.baseURI
<base href="/subapp/"> 不会让前端路由自动识别子路径。Vue Router 和 React Router v6+ 完全不依赖 document.baseURI，它们是两套独立机制。
漏配任一，就会出现“资源加载走 /subapp/js/app.js，点击 Link 却跳到 /home”这种割裂行为。
对应配置必须严格对齐：
- Vue Router：
createRouter({ base: '/subapp/' }) - React Router v6+：
<router basename="/subapp"></router>
注意：basename 属性值不带尾斜杠，但 <base> 的 href 必须带——这是两个系统各自的约定，不能混为一谈。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Webpack/Vite 的 publicPath/base 与
构建工具的输出路径配置和 HTML 中的 <base> 不可共存。两者值相同会引发双重拼接：
- Webpack 设置
publicPath: '/subapp/'，又写<base href="/subapp/">→ 实际请求变成/subapp//subapp/js/app.js - Vite 设置
base: '/subapp/'，再手动加<base>→ 资源路径被解析两次，同样 404
推荐策略：优先用构建工具统一管理资源路径，HTML 中不写 <base>；仅当需支持多 CDN 源或动态子路径切换时，才保留 <base>，并确保构建配置中 publicPath 或 base 设为空字符串或 "./"，避免叠加。
哪些属性真受影响，哪些完全不受控
<base> 只在 HTML 解析阶段起作用，只改写纯相对路径（即既无协议、也不以 / 开头）的硬编码属性。它不是运行时重写器。
✅ 真生效：
<img src="logo.png"><script src="app.js"></script><link href="style.css">- CSS 文件中的
background: url(icon.svg)（注意：这是 HTML 解析时计算的） <form action="submit.php"></form>
❌ 完全不受控：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="/admin/frame.html"></iframe>（根相对路径）
微前端或 SSR 场景下最容易忽略这点：子应用里 JS 动态加载的路径不会受 <base> 影响，必须靠模块系统或运行时逻辑单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
