Vite 是一个现代化的前端构建工具，默认情况下，它会生成基于 ES6+ 的代码。这对于大多数现代浏览器来说是没有问题的，但对于一些较旧版本的安卓浏览器可能会遇到兼容性问题。
为了使 Vite 创建的 React 项目在低版本的安卓设备上也能正常运行，我们需要确保最终的构建产物是兼容旧版浏览器的。这主要涉及使用 Babel 将 ES6+ 代码转换为更旧版本的 JavaScript，并添加必要的 Polyfill。
以下是如何通过 Vite 配置来兼容低版本安卓的步骤：
1. 安装必要的依赖
首先，你需要安装 @vitejs/plugin-legacy 插件和 Babel 相关依赖。
npm install @vitejs/plugin-legacy --save-dev
2. 配置 Vite
在 vite.config.js 中配置 @vitejs/plugin-legacy 插件。这将确保构建后的代码包含必要的 Polyfill 和降级的语法。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
react(),
legacy({
targets: ['defaults', 'not IE 11', 'last 2 versions', '> 1%', 'Android >= 4.4'],
}),
],
});
3. 构建项目
使用 Vite 进行构建：
npm run build
Vite 会根据配置生成兼容性的构建文件，确保在低版本的安卓浏览器中也可以正常运行。
4. 确保包含 Polyfill
即使使用了 @vitejs/plugin-legacy，有时你可能仍然需要手动添加一些 Polyfill，特别是对于一些非常旧的浏览器。你可以在项目的入口文件中（如 src/main.jsx）添加以下代码：
import 'core-js/stable';
import 'regenerator-runtime/runtime';
完整示例
假设你已经用 Vite 创建了一个 React 项目，这里是一个完整的配置示例：
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
react(),
legacy({
targets: ['defaults', 'not IE 11', 'last 2 versions', '> 1%', 'Android >= 4.4'],
}),
],
});
src/main.jsx
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
package.json scripts 部分
确保你的 package.json 中包含以下脚本：
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
总结
通过上述步骤配置 Vite 和 Babel，可以使 React 项目兼容低版本的安卓浏览器。这主要包括使用 @vitejs/plugin-legacy 插件进行降级处理和确保必要的 Polyfill，以支持较旧版本的 JavaScript 特性。构建完成后，生成的代码应该可以在低版本安卓设备上正常运行。