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 能正常了的话就不用看了。

[ZGame]

@ekikaizeng #20 一直有加 不行

[ZGame]

@wangtian2020 估计是客户自己好几年前的老 android tv

[ekikaizeng]

@ZGame #21 那你可以试试我上面遇到的几个。直接打开打包后的 index.html index.js 文件看看。

[wangtian2020]

搞这种兼容性东西真的浪费时间，不买新电视的话，
给他几百块买个迷你主机能跑网页的装电视后面得了，程序员两天人工费不够付的

[asdjgfr]

首先你要确定客户的 webview 版本，如果不支持 es2016 那么无解，换 vue2+vite 吧。如果版本没问题就去下个对应版本的 chrome 本地调试一下，肯定是某个语法报错了
https://caniuse.com/?search=es2016

[zhangLLL]

这样试试：
legacy({
targets: ["chrome>=70"],
renderLegacyChunks: false,
modernPolyfills: true
}),

[webszy]

看一下支不支持 type=module ，整个 vite 打包都是基于这个的。https://caniuse.com/es6-module 。如果不支持建议退回 vue2.7+webpack

[passion336699]

1. package.json

npm i -D core-js regenerator-runtime @vitejs/plugin-legacy

2. vite.config.ts

import legacy from "@vitejs/plugin-legacy";

plugins: [
legacy({
targets: ["defaults", "not IE 11", "Chrome >= 53", "Android >= 6"],
additionalLegacyPolyfills: [
"core-js/stable",
"regenerator-runtime/runtime",
],
}),
]

3. main.ts

import "core-js/stable";
import "regenerator-runtime/runtime";

[ZGame]

@passion336699 明天我再试试

[ZGame]

@passion336699 这个感觉能成的样子...

[realpg]

你们自己集成个电视盒子就好
商用电视用啥内置 android 系统