解决低版本系统白屏问题

困芽芽
1,394 阅读2分钟

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

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

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

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

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

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

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

@vitejs/plugin-legacy

具体详细文档可以看官方

安装插件

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

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'
      ]}
    }),
  ],
}

项目打包

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

哈哈哈哈，打包报错了

[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",

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

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

如果还有问题，可以试一下下面的方案

"vite": "^4.1.0",
"@vitejs/plugin-legacy": "^4.0.1",

先把上面版本调整到以上代码一致的版本，然后安装 然后调整vite.config.js中的plugin-legacy

 legacy({
      // 需要兼容的目标列表，可以设置多个
      targets: [
        '> 0%',
        'Chrome > 4',
        'Android >= 4',
        'IOS >= 7',
        'not ie <= 6',
        'Firefox ESR',
      ],
      renderLegacyChunks: true,
    }),

这种方案至少能兼容到安卓7以上的版本，自测了下是成功的。 如果还是不行，可以安装一个vconsole，定位下到底是哪里报错了，方便解决问题。

过了几天发现另外一个机器又白屏了，但是这次有vconsole日志

bb8ad0ec-9ac1-415c-b66a-802c48793d76.jpg

显示是globalthis is not defined，这个解决我倒是会的

 <script>
      !(function (t) {
        function e() {
          var e = this || self;
          (e.globalThis = e), delete t.prototype._T_;
        }
        "object" != typeof globalThis &&
          (this
            ? e()
            : (t.defineProperty(t.prototype, "_T_", {
                configurable: !0,
                get: e,
              }),
              _T_));
      })(Object);
    </script>

在根部html文件中加入以上这段代码即可不白了

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

avatar
文章
阅读
粉丝