困芽芽de空间

解决低版本系统白屏问题

4/21/2023 vite

简介：项目中打包是是使用的 Vite，在测试阶段发现在低版本的浏览器中，项目界面会出现白屏的现象？

于是我尝试着去解决问题，我首先有下面的几种排查方案？

  1. 打开代码，本地运行，看后台是否有报错，如果有，先解决报错？

验证结果：查看后，发现后台并没有报错，代码无任何异常

  1. 写一个 html 页面部署到服务器上，然后在有问题的浏览器上测一下，看是否还出现白屏？

验证结果：部署上去发现无白屏，正常显示

通过 2 发现可能是兼容性问题，然后我去查看了 vite 的文档 (opens new window)，发现可能会对低版本的浏览器不兼容，可以使用@vitejs/plugin-legacy插件做一下兼容

# @vitejs/plugin-legacy

具体详细文档可以看官方 (opens new window)

安装插件

yarn add @vitejs/plugin-legacy -D
yarn add terser -D
1
2

image.png

然后做以下配置

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['Chrome 64'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
      ]}
    }),
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 项目打包

开始打包，看下是否解决？

哈哈哈哈，打包报错了

[vite:build-html] Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined. error during build: TypeError: Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined.

原因：plugin-legacy 版本为 2.x 后，vite 版本需要为 3.x 版本。如果 vit 版本是 2.x，plugin-legacy 就需要降到 1.x，

解决：这个项目之前是别人写好上线了的，为了风险控制，我尽可能不改动他 vite 的版本，所以我选择降低 plugin-legacy 的版本

"@vitejs/plugin-legacy": "^1.8.2",
1

yarn 完之后，重新进行打包，发现成功了，运行也正常

验证：在低版本浏览器进行验证，发现页面也正常显示了，又测了其他的，也都正常

最后：记录解决问题的过程，如有问题，欢迎指正。