vue3+vite 安卓8.0下打开白屏问题记录

问题：vue3+vite 开发移动端应用，上线后现场反馈安卓8.0下进入页面白屏

分析：原因就是因为语法兼容问题。根据vite官方文档描述，build.target默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 传送，所以需要我们手动兼容低版本。

处理方案：

增加打包兼容代码

vite.config.js下增加

build: {
    target: ['ios11', 'Chrome 64', 'edge90', 'firefox90', 'safari15']}

打包运行发现依然白屏。

请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。 传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

yarn add @vitejs/plugin-legacy rollup-plugin-esbuild

vite.config.js 下增加

import legacy from '@vitejs/plugin-legacy'import esbuild from 'rollup-plugin-esbuild'

{
  plugins: [
   esbuild({    target: 'chrome64',    loaders: {      '.vue': 'js',      '.ts': 'js'    }   }),   legacy({    targets: ['Chrome 64'],    additionalLegacyPolyfills: ['regenerator-runtime/runtime'],    modernPolyfills: true   })  ],}

打包运行发现在系统浏览器下可以正常显示，但是在 特定宿主 App下依然白屏

前端代码引入

vconsole.min.js

 发现在报错原因

globalthis is not defined.

解决方案：

方案一：

如果你在浏览器环境中使用 globalThis 时遇到了 "globalThis is not defined" 的错误，可能是因为你的浏览器版本不支持 globalThis。 globalThis 是一个全局变量，它在所有环境中都是可用的，包括浏览器和 Node.js。但是，如果你使用的是旧版本的浏览器（如 IE11），则可能会导致 globalThis 未定义。

解决方法： 你可以使用 polyfill 来解决这个问题。一个常用的 polyfill 是 globalthis 包，你可以使用以下命令安装它：

yarn add globalthis

import 'globalthis/auto'

这个 polyfill 会自动检测环境是否支持 globalThis，如果不支持，则会创建一个全局变量 globalThis。 注意，使用 polyfill 可能会增加应用程序的体积，因此建议仅在必要时使用。如果你只需要在现代浏览器中运行应用程序，则可以直接使用 globalThis，因为现代浏览器已经支持它了。

方案二：

在 html head里面增加

<script>   this.globalThis || (this.globalThis = this)  </script>

再次打包运行，完美解决问题。