项目中碰见IOS系统进入页面出现白屏问题，记录一下问题排查过程
- 一、页面可能报错
进入页面是白屏，页面的 vconsole 也没有显示，首先想到的是页面是不是有什么报错，然后查看了别的机型，都没有问题，定位到只有IOS13有问题，想着会不会是什么语法在IOS13不兼容（这个问题之前出现过一个问题，?. 不兼容IOS），但是如果有兼容的问题会有vconsole报错，所以应该不是页面有语法错误或者是语法兼容的问题。
- 二、nginx转发出现问题
不是第一个问题，又继续考虑，发现压根没有进入到页面，H5页面顶部名称是调转过来的初始化名称，所以找后端看了一下服务器，发现压根都没放问到服务上。考虑了一下，这个页面是通过nginx转发到这个页面，有可能是nginx转发会不会有什么问题，然后找了运维同学，写了一个静态的html的文件放在服务上，如果访问不到静态页面，说明是nginx转发有问题。然后发现能放问到静态页面。这下就很无奈了。
- 三、打包问题
上面两个问题排除，能想到的只能是打包后机型出现兼容，导致访问不到页面。然后开始一顿操作
1、首先安装所需要的依赖，Vite v3 开始，terser就变成了一个可选的依赖项，需要自己手动安装。
npm i -D rollup-plugin-esbuild npm install terser
2、然后新建一个 .babelrc 的文件
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
3、在vite.config.js添加 esbuild、build 的配置
import esbuild from 'rollup-plugin-esbuild' plugins: [
vue(),
esbuild({
target: "chrome64",
loaders: {
".vue": "js",
".ts": "js",
},
}),
],
build: {
minify: "terser",
target: ["edge90", "chrome90", "firefox90", "safari15"], // 适配低版本浏览器
},
然后重新发版，完美解决。
发现有同学有别的解决办法，没有试，各位可以看看 踩坑日记 vue3兼容低版本ios，解决白屏问题 - 掘金 (juejin.cn)
标签：ios13,H5,问题,nginx,白屏,esbuild,兼容,页面 From： https://www.cnblogs.com/mengzekun/p/18184562