部分iPhone访问Vue Web App出现白屏 其余设备运行正常如何排查

常见兼容性问题根源 #

• Vue 2.x 最低兼容 iOS 9+，Vue 3.x 最低兼容 iOS 10+，如果项目使用了更高版本的生态依赖（如vue-router、pinia、axios等），依赖打包后残留的高版本ES语法会导致低版本iOS Safari无法解析，是此类部分设备白屏问题的最常见诱因
• 即便你没有修改过Vue配置，只要执行过npm install/yarn install拉取过更新的子依赖，就可能出现第三方依赖默认输出ES6+代码的情况：比如可选链?.、空值合并运算符??仅支持iOS 13.4+，顶层await仅支持iOS 15+，低于对应版本的iOS系统会直接抛出语法错误阻塞渲染，刚好对应你描述的部分设备正常、部分设备异常的表现

可执行的排查步骤 #

• 优先统计异常设备的iOS系统版本，确认是否所有异常设备的系统版本都低于某个特定值
• 抓取异常设备的控制台报错：将iPhone连接Mac设备，打开Safari开发菜单，关联对应设备的浏览器页面，查看页面加载时的JS报错，90%以上的问题可以通过报错信息直接定位
• 检查Babel转译范围：Vue CLI 默认配置仅会转译src目录下的代码，node_modules下的依赖默认不转译，需要在babel.config.js的transpileDependencies字段中加入用到的存在语法兼容问题的第三方依赖
• 排查近期新增的API调用：确认是否有新增的iOS专属权限API、系统能力调用，未添加异常捕获逻辑的情况下，部分受限API调用报错会导致全局JS执行中断，触发白屏
• 检查异常设备的 Safari 配置：确认异常设备是否开启了内容拦截器、自定义Safari扩展，或者企业配置限制了对应站点的JS加载

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