【安卓 IOS白屏问题】vite+js+vue3

꧁专治疑难杂症 ꧂

已于 2023-09-06 21:20:17 修改

阅读量888

点赞数 1

文章标签： android ios javascript html5

于 2023-09-06 21:19:39 首次发布

本文链接：https://blog.youkuaiyun.com/youknow156/article/details/132721675

版权

博客主要讲述了在uniapp项目中遇到的安卓和iOS设备白屏问题的解决过程。通过用户反馈，确定问题出现在iOS 13.1.0版本。在安卓设备上通过降级处理第三方包尝试解决，但对iOS无效。最终，通过使用ResizeObserver API解决了iOS的兼容性问题，从而修复了白屏现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何解决【安卓 IOS白屏问题】vite+js+vue3

安卓7 ios 13.1.0白屏

安卓7 ios 13.1.0白屏

让人苦恼，纠结了一天的的问题无意之间解决了。。。

最近遇到一个项目uniapp框架 vue3+js+vite；再升级过程于遇到了有个别用户会有手机白屏的问题，这个问题让人很头疼，由于是H5项目可以使用vconsole 这个方法来进行线上调试，你猜怎么着没有用他不生效。。

在这里插入图片描述

经过同事和大家的分析最后这个问题解决掉了，下面是解决的过程和思路。

用户反馈结果

iphone11 版本号13.1.0：扫码进入页面白屏

记录重点 ，版本号ios13.1.0；
模拟用户操作并解决问题 巧了此时有困难没有苹果本啊没法模拟于是想了一个办法借一个手机进行调试；
将借来的手机系统进行重置为13.1.0，安装微信等工具方便测试支付宝微信这种环境
输出文件以及内容进行调试 ** 无法展示不是缓存就是没有兼容处理 ** 这里我们选后者；

安卓处理

由于他不展示我们直接降级处理对整个第三方包处理
你会发现他然并卵，并没有什么鸟用

//错误思路
//我们下载一下这个包
//npm install rollup-plugin-esbuild
//导入使用  vite.config
 import esbuild from 'rollup-plugin-esbuild'
 plugins: [
...省略其他代码,
esbuild({
   
	 targets: "es2015",
	 loaders: {
   
	  '.vue': 'js',
    '.ts': 'js'
  }
 }),
]
//正确思路
//我们直接导入 vue 或者vite 会自动携带这个包我们直接导入使用
import legacy from '@vitejs/plugin-legacy'
 plugins: [
...省略其他代码,