Xcode13运行Ionic Capacitor项目时Mapbox失效但livereload模式正常

以下是经社区验证可解决该问题的操作步骤：

根因说明 #

该差异由生产构建与live reload模式的资源加载规则不一致导致：

• live reload模式下应用从本地开发服务器拉取资源，不会触发生产环境的静态资源压缩、依赖树剪枝、iOS应用传输安全的严格校验
• 无live reload的生产构建模式下，Mapbox依赖的WebGL配置、动态资源未被Capacitor正确打包，触发Xcode 13新增的生产构建优化规则导致地图初始化失败，触发页面自动重载

操作步骤 #

1. 调整iOS端WKWebView配置 #

打开ios/App/App/Info.plist，添加如下配置，放开地图运行所需的权限：

<key>WKPreferences</key>
<dict>
    <key>WKWebGLEnabled</key>
    <true/>
    <key>WKJavaScriptEnabled</key>
    <true/>
    <key>WKAllowFileAccessFromFileURLs</key>
    <true/>
    <key>WKAllowUniversalAccessFromFileURLs</key>
    <true/>
</dict>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

2. 禁用生产构建对Mapbox的过度优化 #

根据你使用的前端框架调整配置，避免打包时剔除Mapbox运行所需的依赖：

• Angular项目：在angular.json的生产构建配置项中，将optimization下的scripts设为false，或者运行构建命令时临时添加--optimization=false做验证
• Vue项目：在vue.config.js中添加如下配置：

  module.exports = {
    configureWebpack: {
      externals: { 'mapbox-gl': 'mapboxgl' }
    }
  }
  

3. 升级适配版本 #

将你使用的Mapbox相关依赖升级到适配Xcode 13的最新稳定版，如果你使用的是社区版Mapbox Capacitor插件，建议升级到@capacitor-community/mapbox v3.0+版本

4. 清理缓存重新构建 #

每次打包前执行如下命令清理旧的构建产物：
ionic cap sync ios --clean
之后打开Xcode点击Product -> Clean Build Folder清理Xcode本地缓存，再运行无live reload的构建验证即可。

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