如何在Cordova中设置绝对路径解决SPA跨端资源加载问题

核心结论 #

Cordova完全支持适配绝对路径，不需要强制使用相对路径，可通过构建注入或运行时动态计算的方式解决浏览器端、移动端路径不统一的问题。

具体适配方案 #

方案1：构建时环境区分注入前缀（适配可修改构建产物的场景） #

在构建脚本中新增环境变量标识，区分浏览器端、Cordova Android端、Cordova iOS端三个构建场景，分别注入不同的资源路径前缀：

• 浏览器端：前缀设为/，最终资源路径为/js/app.min.js，符合现有浏览器端逻辑
• Android端：前缀固定为file:///android_asset/www/，最终资源路径为file:///android_asset/www/js/app.min.js，可直接定位到打包后assets下的www目录资源
• iOS端：因应用安装后bundle路径的UUID每次安装都会变化，不可硬写固定前缀，可在入口HTML最顶部添加前置脚本动态计算根路径，挂载到全局变量供资源加载逻辑调用：

// 需放在所有资源加载逻辑前执行
if (window.cordova && /iOS|iPhone|iPad/.test(navigator.userAgent)) {
  window.__ASSET_PREFIX__ = window.location.href.split('www/')[0] + 'www/';
}

构建时将所有资源路径的前缀替换为__ASSET_PREFIX__变量，iOS端运行时会自动替换为正确的根路径。

方案2：动态配置base标签（无需多环境构建，一套代码适配双端） #

直接在入口HTML的head标签中添加脚本动态生成<base>标签，统一全站资源的基础解析路径：

<head>
  <script>
    let baseHref = '/';
    // 匹配Cordova端file协议环境
    if (window.location.protocol === 'file:') {
      baseHref = window.location.pathname.split('/').slice(0, -1).join('/') + '/';
    }
    document.write(`<base href="${baseHref}" />`);
  </script>
  <!-- 后续资源直接写相对于项目根目录的绝对路径即可，如/js/app.min.js -->
</head>

该方案无需修改构建逻辑，可自动适配浏览器、Android、iOS三端，SPA路由刷新时资源加载路径始终正确。

补充注意事项 #

• 无需修改Cordova的config.xml配置，上述方案均在前端侧即可实现
• 若使用history路由模式，需额外配置Cordova端物理返回键的路由回退逻辑，避免直接退出应用

内容的提问来源于stack exchange，提问作者pbuzz007