在混合 app 中基本无效甚至有害，因 webview 对其支持不稳定，file:// 协议下无根概念，capacitor:// 不被识别，且与 js 运行时路径机制冲突；应改用构建时路径注入和环境变量管理。
<base> 在混合 App（如 Cordova、Capacitor 或 WebView 封装的 Web 应用）中基本无效，甚至有害——它不解决路径问题，反而会干扰本地资源加载和 JS 运行时行为。
WebView 环境下 <base href> 多数被忽略或引发 404
混合 App 的 WebView（尤其 Android WebView 和旧版 iOS UIWebView）对 <base> 支持不稳定：部分版本静默丢弃非绝对 URL 的 href 值；部分版本虽解析但不修正 srcset、iframe src 或 CSS @import；更常见的是，当页面通过 file:// 协议加载（如 file:///android_asset/www/index.html）时，浏览器直接拒绝 <base href="/app/"> 这类根相对路径——因为 file:// 下无“根”概念。
-
<base href="file:///android_asset/www/">看似合理，但多数 WebView 不支持file://协议作为base，控制台无报错，但<img src="icon.png">仍按当前 HTML 文件所在目录解析（即file:///android_asset/www/），若图片实际在assets/img/，就 404 -
<base href="https://cdn.example.com/v2/">能生效，但仅限网络资源；本地打包的 JS/CSS/图片无法走 CDN，硬设会导致全部请求发往远程，离线失效 - Capacitor 3+ 默认使用
capacitor://协议，而该协议不被任何主流浏览器视为合法<base href>协议前缀，标签直接被丢弃
<base> 和混合 App 的 JS 路径机制根本冲突
混合 App 的核心能力（如调用原生插件、读取本地文件、访问设备 API）都依赖 JS 运行时构造路径，而 <base> 对这些完全无感：
-
fetch('./api/data.json')和Capacitor.Plugins.Filesystem.readFile({ path: 'config.json' })全部按当前脚本位置或插件约定解析，不受document.baseURI影响 -
import('./pages/home.js')由打包器（Vite/Webpack）在构建时解析并重写，运行时路径与<base>无关 - 即使你用
new URL('data.json', document.baseURI)手动构造 URL，document.baseURI在file://下可能返回about:blank或空字符串，不可靠
真正该用的替代方案：构建时路径注入 + 协议白名单
混合 App 的资源路径必须在构建阶段固化，而非靠 HTML 解析时动态干预：
- Vite 用户应设
build.base: './'（相对路径）或build.base: ''（空字符串），确保所有<script src></script>输出为相对路径，适配file://加载逻辑 - Webpack 用户禁用
publicPath: '/'，改用publicPath: ''或publicPath: './'，避免生成/js/app.js（会被 WebView 当作服务器根路径） - 所有接口请求路径统一走环境变量：
API_BASE_URL = process.env.NODE_ENV === 'production' ? 'https://api.example.com' : 'http://localhost:3000'，不拼接base.href - Cordova 用户需在
config.xml中显式声明<access origin="https://cdn.example.com"></access>，否则即使<base href>指向 CDN，WebView 也会拦截请求
最易被忽略的一点：<base> 在混合 App 里既不能解决本地资源定位，也不能统一 JS/CSS/HTML 的路径逻辑，强行使用只会让 file:// 下的图片 404、fetch 请求发错地址、插件初始化失败——它不是桥梁，而是断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
