vue3 vite项目H5页面 ios13进入页面出现白屏问题

项目中碰见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)