前言

今天接了个bug，vue3 在 低版本ios中白屏了（这里的版本是ios13），由于没有安装xcode这些调试工具，所以我只能拿到一个bug效果

效果如下：

排查

由于表象太模糊， 通过目前已知消息去推断问题 高版本的ios是可以正常使用的，而低版本的会白屏

因此可以得出一个结论，我们的代码是没有问题的，应该是js兼容问题。

所以解决方向应该是往babel处理兼容走。

修复

基于上面的推论，结合babel配置文档。

1.修改babel配置即可。

babel.config.js 如下

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['iOS >= 11'],
        },
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
  ],
};

简单解释下上述配置

@vue/cli-plugin-babel/preset：并设置自动引入需要的Polyfill，并指定corejs为版本3 @babel/preset-env：同上，另外新增版本兼容 iOS 11 及以上的版本。

2.在入口文件处导入一下

import 'babel-polyfill';

结果

修改完之后，重新打包执行，通过局域网代理调试，效果如下：

成功修复