uni-app 创建Vue3版本的项目在Android 8.1手机自带浏览器运行白屏

uni-app 创建Vue3版本的项目在Android 8.1手机自带浏览器运行白屏

开发环境 版本号 项目创建方式
Mac 14.3.1 HBuilderX

操作步骤：

uniapp新建两个项目，一个项目Vue版本选择Vue2，另一个Vue版本选择Vue3，然后本地运行两个项目。将两个本地运行的项目地址分别输入在Android 8.1版本手机的自带浏览器中运行，发现Vue2版本的项目，页面可以正常展示，Vue3版本项目显示白屏。然后再将两个地址输入到相同手机的QQ浏览器中运行，发现两个项目都可以正常打开。


### 预期结果：

Vue2版本项目和Vue3版本项目在Android 8.1系统手机默认浏览器中都可以正常运行。

实际结果：

Vue2版本项目在Android 8.1系统手机默认浏览器中可以正常运行，Vue3版本项目运行白屏


### bug描述：

在Android 8.1版本手机的自带浏览器中运行uniapp创建的Vue2版本项目，页面可以正常展示，但打开uniapp创建的Vue3版本项目显示白屏。在相同手机下载QQ浏览器打开两个项目，发现都可以正常打开，请问这是什么原因？（两个项目都为新创建的空项目，唯一不同是创建时一个选择Vue2，一个选择Vue3，且都没有引入任何依赖）

Image 1 Image 2 Image 3

33d08da6efacb3fc9ff8ed07c3768c80.mp4_.zip


更多关于uni-app 创建Vue3版本的项目在Android 8.1手机自带浏览器运行白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这不就是不支持高版本js吗，找插件转一下

更多关于uni-app 创建Vue3版本的项目在Android 8.1手机自带浏览器运行白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我试了几种转换方式，都无法解决

这是一个典型的浏览器兼容性问题。Android 8.1系统自带浏览器内核较老，对ES6+新特性的支持不完善。

Vue3项目白屏的主要原因：

  1. Vue3编译输出问题：Vue3默认使用ES6+语法和API，如箭头函数、const/let、Proxy等，这些在老版本浏览器中可能不被支持

  2. 浏览器内核差异：

    • Android 8.1自带浏览器基于WebView 66或更低版本
    • QQ浏览器使用更新的内核，支持现代JavaScript特性

  3. 构建配置差异：Vue3项目默认构建目标可能设置为较新的ES版本

解决方案：

在项目的manifest.json中配置兼容性：

{
  "vueVersion": "3",
  "app-plus": {
    "compilerVersion": 3,
    "usingComponents": true
  }
}
回到顶部