• 解决Vue3在低版本ios中白屏的问题
  • 发布于 2个月前
  • 378 热度
    0 评论
前言
今天接了个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';
结果
修改完之后,重新打包执行,通过局域网代理调试,效果如下:

用户评论