求助：Vite+ReactJS应用无法在Android 8及以下版本加载

问题概述 #

将React项目迁移到Vite后，Android 8（奥利奥）及以下版本的移动设备无法打开或加载应用，页面仅显示空白屏幕，无任何错误或警告。已尝试使用@vitejs/plugin-legacy插件，但问题仍未解决。

问题复现步骤 #

• 启动任意基于Vite+React的项目（开发模式或构建后启动预览服务均可）
• 在Android Studio模拟器中启动Android 8或更低版本的虚拟设备
• 访问本地IP:端口，页面显示空白，无报错信息

当前Vite配置 #

export default defineConfig({
  // for production build environments only
  build: {
    // minimum support es2015
    target: 'es2015',
  },
  server: {
    host: "localhost",
    port: 8009,
    strictPort: true,
    open: true,
    fs: {
      // Allow serving files from one level up to the project root
      allow: [".."],
    },
  },
  plugins: [
    react(),
    // for production build environments only
    legacy({
      /**
       * 1. try changing these values
       * 2. run `pnpm build`, see the output files in dist directory
       * 3. run `pnpm preview`, see the actual loaded files in different versions of browsers
       */
      targets: ['cover 100%', 'not chrome < 15', 'not and_chr < 15', 'not safari < 5', 'not ios_saf < 5','not firefox < 45',' not and_ff < 45', 'not edge < 12', 'not ie < 9', 'not ie_mob < 9', 'not opera < 12.1', 'not op_mob < 12.1', 'not op_mini < 12.1', 'not android < 4.4'],
      renderLegacyChunks: true,
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      modernPolyfills: true,
    }),
  ],
});

排查与解决建议 #

1. 精准配置legacy插件的目标浏览器 #

当前targets配置过于宽泛，not android < 4.4并没有针对性覆盖Android 8的兼容需求。Android 8对应的Chrome版本为68，建议直接指定明确的兼容目标，同时将build.target下调至es5（Android 8对ES2015部分特性支持不完全）：

build: {
  target: 'es5', // 下调至ES5以更好兼容旧设备
},
legacy({
  targets: ['Android >= 8', 'Chrome >= 68'], // 明确指定兼容版本
  // ...其他配置
})

2. 补充完整的Polyfill #

仅添加regenerator-runtime/runtime不足以覆盖所有旧浏览器缺失的API，需补充core-js相关polyfill。先安装依赖：

pnpm add core-js regenerator-runtime

然后修改legacy配置：

legacy({
  // ...其他配置
  additionalLegacyPolyfills: ['core-js/stable', 'regenerator-runtime/runtime'],
  modernPolyfills: false, // 关闭现代浏览器polyfill，避免冲突
})

3. 优先测试生产构建包 #

Vite开发模式默认使用原生ES模块，而Android 8的浏览器对ES模块支持有限，@vitejs/plugin-legacy仅在生产构建阶段生效。因此排查时务必先执行pnpm build生成生产包，再通过pnpm preview启动服务测试。

4. 利用浏览器开发者工具排查静默错误 #

空白页可能是因为浏览器静默报错，可通过以下步骤查看错误：

• 打开PC端Chrome浏览器，访问chrome://inspect
• 连接运行中的Android 8模拟器，点击对应页面的inspect按钮
• 在Console标签页查看隐藏的错误信息，Network标签页检查资源加载状态

5. 检查React版本兼容 #

若使用React 18，需额外添加针对旧浏览器的polyfill。可安装react-app-polyfill并在项目入口文件（如src/main.jsx）顶部引入：

pnpm add react-app-polyfill

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

内容的提问来源于stack exchange，提问作者Prateek Balchandani