车机浏览器白屏主因是android 5–7 webview（chromium 30–64）不支持高阶es语法（如class、#私有字段、super()等），导致js解析报错中断；需结合babel降级+core-js/regenerator-runtime同步注入polyfill+运行时能力兜底检测。
车机浏览器白屏，多数不是页面没加载，而是 JS 执行中途报错退出——尤其在 Android 5–7 的 WebView（对应 Chrome 30–64）中，高版本 ES 继承语法（如 class A extends B、super()、私有字段 #x、静态块 static{}）根本无法解析，直接卡在 Uncaught SyntaxError: Unexpected token 'extends' 或 Unexpected token '#'，连首屏 DOM 都没来得及挂载。
确认车机实际运行环境
别只看“安卓7”或“海信电视”，要抓真实 UA 或用控制台打印 navigator.userAgent。常见典型环境：
- Android 5.1 + WebView（Chromium 30–40）：不支持
class、let、const、Promise，import报错即终止 - Android 6.0 + WebView（Chromium 48–51）：支持基础
class，但不支持super()在箭头函数中调用、不支持可选链a?.b、不支持空值合并a ?? b - Android 7.1 + WebView（Chromium 64）：支持大部分 ES2015–ES2017，但缺
globalThis、Array.prototype.flat、Intl.ListFormat等 API，且无 WebAssembly 支持
构建层：降级语法 + 注入 Polyfill
仅靠 Babel 转译不够，必须让 polyfill 在任何 JS 执行前就位：
-
Vue CLI 项目：在
main.js最顶部加入两行（顺序不能错）：import 'core-js/stable';import 'regenerator-runtime/runtime'; -
Vite 项目：安装
@vitejs/plugin-legacy（注意版本匹配，Vite 4 用@4.1.1），并在vite.config.ts中启用：legacy({ targets: ['chrome >= 49', 'android >= 4.4'] }) -
Webpack 项目：entry 入口改为数组，把 polyfill 提前：
entry: ['core-js/stable', 'regenerator-runtime/runtime', './src/main.js']
关键点：polyfill 必须是同步加载、全局注入；异步 import 或动态 require 都来不及。
运行时：兜底检测 + 安全降级
即使编译后，某些特性仍可能运行时报错（如 WebGLRenderingContext 为 null、fetch 未定义）。加一层最小化探测：
- 在
index.html的中插入内联脚本，检查关键能力：if (!window.Promise || !window.fetch || !document.createElement('canvas').getContext) { location.href = '/fallback.html'; } - 避免使用
try/catch包裹整个应用启动逻辑——错误发生在模块解析阶段，catch捕不到 - 禁用现代语法糖：手动替换
?.为&&判断，??改用||（注意0、''等 falsy 值需单独处理）
验证与调试技巧
真机调试难？用低成本方式逼近：
- Chrome 64 离线版（可下载 portable 版）模拟 Android 7.1 WebView 行为
- 在 PC Chrome 中打开
chrome://flags/#enable-experimental-web-platform-features，关闭所有实验性特性，再测试 - 用
console.log替代debugger，因低端 WebView 往往不支持断点调试 - 打包后检查生成的
chunk文件开头是否有require("core-js/stable")或import "regenerator-runtime"字样
白屏本质是执行流中断，修复核心就三点：环境摸清、语法压到 ES2015、API 缺失提前兜住。
