q***@163.com
q***@163.com
  • 发布:2022-08-11 10:41
  • 更新:2023-04-12 16:41
  • 阅读:2543

使用vue3新建的项目在低版本ios浏览器中显示白屏

分类:uni-app

问题摘要描述

使用vue3新建的项目在低版本ios浏览器中显示白屏

开发环境

MacBook Air(M1, 2020)

MacOS Monterey V12.2.1

芯片: Apple M1

项目创建方式

  • [x] HbuilderX 3.2.12
  • [x] vite脚手架,依赖"@dcloudio/uni-app": "3.0.0-alpha-3050320220727002"

以上均复现出此问题。

测试机型

  • [x] iPhone8 (IOS 11.1) ,以下简称机型A
  • [x] iPhone8 Plus (IOS 14.7) ,以下简称机型B
  • [x] iPhone13(IOS 15.6), 以下简称机型C
  • [x] 某红米手机(具体信息不详),以下简称机型D

复现过程

1.默认模板新建项目

image-20220811101400434

2.在manifast.json中将Vue版本改为3

<img src="https://qiniu.buaihechengzizhi.com/img/image-20220811101607741.png" alt="image-20220811101607741" style="zoom:50%;" />

3. 运行项目到浏览器

image-20220811101718074

4.复制局域网链接到测试机型

分别在微信浏览器和各自的默认浏览器中打开。

5. 统计测试结果

机型 微信浏览器 手机默认浏览器
iPhone8 (IOS 11.1) 白屏,可以显示manifast中配置的标题 白屏,可以显示manifast中配置的标题
iPhone8 Plus (IOS 14.7) 显示正常 显示正常
iPhone13(IOS 15.6) 显示正常 显示正常
某红米手机 显示正常 显示正常

6.使用苹果的safari联调

Apple对于登录同一个apple id的电脑和手机提供远程调试手段,经测试发现:

对于机型A,可以显示出模板骨架(即index.html)中的内容,但中间DOM树是空的,所以判断为JavaScript根本没有得到执行,已排除是否禁用了js脚本的问题。

以上为通过HbuilderX复现的步骤,vite脚手架复现则同理拉取模板仓库即可。

其他补充

已测试在把Vue版本更改为2后,所有机型都表现正常。

因在官方文档上标注vue3的兼容性为IOS >= 10,故有此疑问。

期望结果

  1. 告知问题出现原因
  2. 提供解决方案/是否能解决
2022-08-11 10:41 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

问题已确认,感谢反馈,已加分

  • 7***@qq.com

    大佬,请问这个BUG啥时候能修复啊?

    2022-10-08 17:36

j***@163.com

j***@163.com

您好,可以问一下ios11.1出现白屏是报什么错吗?万分感激

7***@qq.com

7***@qq.com - hello world

你好,这个问题解决了吗?iphone 8plus ios 13.6 也遇到同样问题了。

y***@163.com

y***@163.com

我也是vue3 在ios11上显示白屏 请问是需要配置babel吗 不管是uniapp还是用vue cli创建的vue3项目都有这个问题 希望有大神回答

y***@163.com

y***@163.com

解决了 需要修改uniapp打包配置文件
1.打开hbuilder所在目录 找到plugins/uniapp-cli-vite

  1. 安装 @vitejs/plugin-legacy```javascript
    npm install @vitejs/plugin-legacy
    
    3.打开uniapp-cli-vite目录下的vite.config.js配置文件 写入以下代码  
    import { defineConfig } from "vite";  
    import uni from "@dcloudio/vite-plugin-uni";  
    import legacy from "@vitejs/plugin-legacy";  

/**

  • @type {import('vite').UserConfig}
    */
    export default defineConfig({
    plugins: [
    uni(),
    legacy({
    targets: [
    "> 1%, last 1 version, ie >= 11",
    "safari >= 10",
    "Android > 39",
    "Chrome >= 60",
    "Safari >= 10.1",
    "iOS >= 8",
    "Firefox >= 54",
    "Edge >= 15",
    ],
    }),
    ],
    });
    tip:开发环境依然无法在ios11及以下版本正常显示 依旧白屏,只在生产环境中正常显示

要回复问题请先登录注册