vue3项目iOS10、11上白屏处理

发现问题一

vue3 已经发布一年多了，8月份我使用 vue-cli 搭建了一个 vue3 + ts 的项目，搭建项目时也考虑到兼容问题，因此在package.json 文件中配置了 browserslist

  "browserslist": [
    "Android >= 6.0",
    "iOS >= 9",
    ">0.1%"
  ]

最近多名用户反馈页面白屏，由于项目是单页面应用，可以确定是 js 报错导致的，检查发现报错信息如下：

可以看出是 ... 解构赋值不兼容的错误。于是我查看一下解构赋值的兼容性，如下图：

可以看出对象结构赋值兼容并不友好，于是我使用 Object.assgn() 方法替换了 ...。替换后，ios 11.2 一下版本依旧白屏。

发现问题二

由于 iOS 端有白屏问题，于是我请教了 iOS 端开发帮忙调试。

查找问题是找到了这篇文章# 报告老板，我们的H5页面在iOS11系统上白屏了！，我了解到了 Safari Technology Preview ，安装 Safari Technology Preview 后，调试发现依旧是解构赋值的问题:

解决问题

可以看到项目依赖有使用到解构赋值，我需要 babel 处理包文件中的 es6 语法。 根据 vue-cli 官网提供的解决办法 polyfill。

修改 vue.config.js 文件，代码如下：

module.exports = {
  transpileDependencies: [
    /[/\\]node_modules[/\\](.+?)?vant/,
    /[/\\]node_modules[/\\](.+?)?vue/,
    /[/\\]node_modules[/\\](.+?)?vue-router/,
  ]
}