vue vite 打包 白屏问题

[ZGame]

会在一些老版本的 android tv 上白屏，各位有知道解决办法吗

[chunuou]

https://cn.vite.dev/plugins/#vitejs-plugin-legacy
推测是 webview 版本太旧了

[akakidz]

大概率是楼上说的问题，关键字：Vue vite IE 兼容

[shui830]

应该是用了 es6 语法，老版本不支持这些特性，搜一下怎么兼容就可以了

[PeakFish]

es6 语法能兼容吗？或者换成 webpack

[linkopeneyes]

@vitejs/plugin-legacy 用这个包做兼容，但是 android 有些很变态魔改过浏览器内核的话，这个库是不能很好兼容的，因为他是根据 script 标签有没有 type=“module”来做兼容，但是有些魔改过的有这个属性但是其他 api 又给删了不支持，

[gouflv]

迁移 vue2

[ZGame]

@sjhhjx0122 vue2 和 react 阿里 umi 的打包好像都可以

[andyskaura]

同意五楼，用 @vitejs/plugin-legacy ，兼容到 chrome65 左右就差不多了。国产魔改电视还看不到系统版本和内置 webview 版本

[ZGame]

@andyskaura plugins: [vue(), legacy({
targets: ['IE 11', 'Chrome >= 65'], // Update targets to include IE 11 and Chrome 65
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 若需要补充额外的 polyfill
}), plainText(/\.hbs$/)], 是这样吗 我总感觉还不太行

[linkopeneyes]

@ZGame #7 umi 我记得以前是 webpack 吧，webpack 兼容和 vite 兼容不一样的，vite 这个兼容是拆成两个包根据 script 的属性动态做做兼容，webpack 基本都是全量到一个包里

[shui830]

最简单粗暴的方法，直接全局引入 core-js ，hah

[coolcoffee]

@andyskaura 这个网页上直接用脚本探查下 navigator.userAgent 就知道吧

[PEax]

遇到过，后面调试发现是 ES6 语法报错了，ES6 不兼容，换成 ES5 就好了。

[ZGame]

@PEax 有简单的配置文件瞅瞅吗
@coolcoffee 就是客户老的电视机 在现场 有点麻烦

[andyskaura]

@coolcoffee 魔改了的

[sankemao]

我这边是直接在 android 包里集成了腾讯 x5 的 webview

[chobitssp]

先移除 script 的 prefetch preload defer 再看下 es 兼容性问

[wangtian2020]

网址输入 edge://inspect/#devices 可以局域网远程调试
一眼 webview 版本问题
国内各种电视 Android 版没有一点儿 webview 升级的可能性
建议把采购电视的人骂一顿，省钱买的什么√⑧垃圾电视 webview 版本这么低

[ekikaizeng]

可以先看一下 userAgent 里面的内核版本是多少。之前公司有的老平板只有 61 ，遇到过几个白屏问题，看看能不能帮上忙。

1. Vite 打包后的动态引入不支持 dynamic import()
2. 打包后 HTML 标签里面的 nomodule 特性不支持 HTML element: script: nomodule
3. 打包后 HTML 标签 preload 特性不支持（ prefetch 好像最后也直接去掉了）

可以在 caniuse 上搜后面的英文，查看支持的最低版本，根据实际的内核版本来改 vite.config 里面的打包配置。

[ekikaizeng]

@ekikaizeng 附：如果加了 vitejs-plugin-legacy 能正常了的话就不用看了。