<base>标签在移动端非必须，但用错会静默失效致404；仅作用于HTML解析阶段的硬编码相对路径，对JS动态加载、fetch、@import等无效，且必须为绝对URL或结尾带/的根相对路径。
<base> 在移动端网页开发中不是“必须用”，而是“用错就静默失败、404 风险陡增”。它只对 HTML 解析阶段的硬编码相对路径起效，对 JS 动态加载、CSS @import、fetch() 完全无效——这点在混合 WebView 或 PWA 场景下极易踩坑。
移动端常见部署场景下 base href 必须是绝对 URL 或根相对路径
移动端页面常被嵌入 WebView、PWA 缓存或 CDN 加速链路，此时当前页面 URL 可能是 file://（本地调试）、http://localhost:8080/（热更新）或 https://cdn.example.com/v3.1/（生产）。浏览器只认以 https://、http://、// 或 / 开头的 href 值，其他一律静默忽略。
-
<base href="static/">→ 缺协议和域名，整条被丢弃，<img src="icon.png">仍按file:///index.html解析，404 -
<base href="https://example.com">→ 结尾没/，Firefox/Opera 会把css/app.css拼成https://example.comcss/app.css - 正确写法只有两种：
<base href="https://cdn.example.com/app-v2/">（推荐，跨环境稳定），或<base href="/app/">（需确保所有子路径部署一致）
WebView 和 PWA 中 base 标签与 JS 路径不联动
Android WebView 或 iOS WKWebView 加载本地 HTML 时，<base href="/assets/"> 对 <script src="main.js"> 有效，但对 import('./utils.js')、fetch('./api/data.json')、new Worker('./worker.js') 完全无效——它们仍按 HTML 文件所在目录解析。PWA 的 self.location.origin + '/app/' 缓存前缀若和 <base> 不一致，预缓存清单就会错位。
- 不要指望
<base>能统一控制 JS 运行时行为；document.baseURI可读，但window.location和document.URL不变 - 动态资源路径建议显式构造：
new URL('data.json', document.baseURI)，而非拼字符串 - Service Worker 缓存策略中若硬编码路径，必须和
<base href>值严格对齐
SPA 部署在子路径时，base 标签和前端路由必须配对设置
Vue Router 的 base: '/mobile/' 和 HTML 中的 <base href="/mobile/"> 是两套独立机制，缺一不可。只设一个，必然出问题：
立即学习“前端免费学习笔记（深入）”；
- 只设
<base href="/mobile/">：JS chunk 能加载，但router.push('/home')会跳到/home（根路径），不是/mobile/home - 只设 Vue Router
base：路由跳转正常，但<script src="js/chunk-abc.js">因无<base>仍按当前页 URL 解析，导致 chunk 404 - 微前端子应用若同时配置 Webpack
publicPath和<base href="/mobile/">，资源路径可能被拼两次：/mobile//mobile/js/app.js
最容易被忽略的是：本地开发时用 http://localhost:3000/ 作 href 比用 / 更安全，能避免和后端代理路由冲突；而生产环境走 CDN 时，用完整绝对 URL（如 https://cdn.example.com/app-v2/）比根相对路径更可控——因为移动端网络环境多变，file:// 或非标准协议下，根相对路径根本不可靠。
