Vue项目在iOS Safari浏览器上白屏崩溃如何排查？

Vue项目iOS Safari白屏主因是JS执行中断或挂载失败，须用Mac+Safari真机调试：开启iPhone“Web检查器”，连接后查Console报错；检查<div id="app">是否存在以判断Vue是否初始化；在main.js顶部加全局错误捕获；确认polyfill引入及babel目标版本（如ios: '12.1'）；关闭压缩验证是否Uglify导致；history模式需服务端fallback或publicPath设为'./'。

Vue项目在iOS Safari浏览器上白屏崩溃，说明页面加载后既无内容渲染也无明显报错，极可能是JavaScript执行中断或资源挂载失败导致根实例未启动，必须通过设备直连调试定位第一处断点。

用Mac+Safari直连真机抓控制台错误

打开Mac上的Safari → 顶部菜单栏「开发」→ 找到你的iPhone设备名称 → 点击当前打开的Vue网页标签页。

确保iPhone已开启「设置→Safari→高级→Web检查器」，且Mac与iPhone在同一Wi-Fi下；【若开发菜单不显示设备，请重启iPhone的Safari并重新连接USB】。

切换到Console面板，刷新页面，紧盯红色报错行——哪怕只有一条SyntaxError、TypeError或“Can't find variable: Promise”，都是白屏根源。

检查#app是否被创建但未挂载

在Safari开发者工具的Elements面板中搜索<div id="app">。

如果该节点存在但内部为空（无子元素），说明new Vue()已执行，但mounted钩子未触发，问题出在created或beforeMount阶段；

如果整个<div id="app">都不存在，说明Vue实例根本没初始化成功，大概率是入口JS语法错误、polyfill缺失或Uglify压缩破坏了代码结构。

在main.js入口注入全局错误捕获

方法一：补全未捕获的Promise拒绝错误

在main.js最顶部添加：

window.addEventListener('unhandledrejection', e => { console.error('Unhandled Rejection:', e.reason); });

方法二：拦截同步脚本错误

紧接在上面代码下方加：

window.onerror = (msg, url, line, col, error) => { console.error('Global Error:', { msg, url, line, col, error }); };

这两段必须放在任何import语句之前，否则无法捕获早期错误；【漏掉这一句，async/await里抛出的错误会静默吞掉，导致白屏却无日志】。

快速验证是否为ES特性兼容问题

第一步：确认项目是否引入了babel-polyfill或core-js

打开src/main.js，检查是否存在import 'core-js/stable'; import 'regenerator-runtime/runtime';（Vue CLI 3+推荐）或import 'babel-polyfill';（旧版）。

第二步：检查babel配置是否锁定iOS目标版本

打开babel.config.js，确认presets中包含：

{ targets: { ios: '12.1' } } —— iOS 12.1起支持大部分ES2018特性，低于此版本需更保守；若项目需支持iOS 10～11，必须启用safari10: true选项并禁用mangle。

第三步：临时降级测试

在vue.config.js中强制关闭代码压缩，避免UglifyJsPlugin误伤：

configureWebpack: { optimization: { minimize: false } }，然后重新build→部署→真机验证。若此时白屏消失，问题就锁定在压缩环节。

排查路由模式引发的404白屏

① 打开Safari Network面板，刷新页面，查看index.html之后的首个JS/CSS请求是否返回404或500状态码。

② 若使用history模式，检查服务器是否配置了fallback：所有非静态资源请求都应返回index.html。

③ 若本地直接双击打开dist/index.html，必须将vue.config.js中的publicPath设为'./'而非'/'，否则路径解析失败导致JS加载404，Vue根本不会启动。

这一步操作起来很简单，直接把文件拖进去就行。