告别 CRA，迎接 Vite：开发者的 2026 年迁移生存指南

Source: Dev.to

嗨，开发者们 👋 多年来，Create React App (CRA) 一直是快速搭建 React 项目的首选工具。然而，自 2025 年 2 月 起，CRA 正式停用。React 团队不再推荐使用它，因为构建速度慢、配置过时，并且缺乏对 ES 模块和原生 ESM 兼容依赖等现代特性的支持。

如果你仍在使用 CRA，是时候迁移了。对于不需要最新特性（如 React Server Components）的典型 SPA，Vite 是最佳选择。

什么是 Vite？ 🤔

Vite 是一款快速、现代的构建工具，提供即时热模块替换（HMR）、优化的构建以及更好的开发者体验。它旨在为现代 Web 项目提供更精简的开发工作流。

为什么选择 Vite？ ⚒️

超快的开发体验

Vite 利用 ES 模块（ESM）和优化的依赖预打包过程（esbuild），相较于 CRA 大幅缩短冷启动时间。

即时热重载

Vite 提供真正的即时更新，无需页面刷新，使开发体验更流畅、更高效。

优化的构建

Vite 使用 Rollup 进行生产构建，确保高效的 tree‑shaking、代码拆分以及更小的产出体积。

更好的 ESM 支持

Vite 原生支持 ES 模块，在大多数情况下可以在不使用 Babel 的情况下处理现代 JavaScript，从而显著加快构建速度。

再也没有 Webpack 配置的烦恼

Vite 通过插件化系统和简洁的 vite.config.js 文件，消除了复杂的 Webpack 配置。

步骤指南：将 CRA 迁移到 Vite

1. 卸载 Create React App

npm uninstall react-scripts
# or with Yarn
yarn remove react-scripts

2. 安装 Vite 及必要插件

npm install vite @vitejs/plugin-react --save-dev

3. 更新 package.json 脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

4. 移动并修改 index.html

将 public/index.html 移动到项目根目录，并将 script 标签替换为：

5. 创建 vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build', // 与 CRA 的默认输出文件夹保持一致
  },
});

6. 更新项目入口文件

将 CRA 的入口文件 src/index.js 重命名为 src/main.jsx（或新建 main.jsx），并相应调整导入路径。

7. 更新静态资源处理方式

CRA:

Vite:

![](/logo.png)

8. 调整环境变量

将 .env 中的变量前缀从 REACT_APP_ 改为 VITE_：

# before
REACT_APP_API_KEY=yourapikey

# after
VITE_API_KEY=yourapikey

在代码中访问它们：

const apiKey = import.meta.env.VITE_API_KEY;

9. 处理 CSS 与全局样式

在 main.jsx 中显式导入全局 CSS：

import './index.css';

CSS Modules 开箱即用：

import styles from './App.module.css';

10. 迁移测试（如果你有 Jest 测试）

安装 Vitest：

npm install vitest --save-dev

更新测试脚本：

{
  "scripts": {
    "test": "vitest"
  }
}

在 vite.config.js 中添加 Vitest 配置：

export default defineConfig({
  // ...other config
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
});

11. 最后一步：运行你的 Vite 应用！

npm run dev

这将启动一个快速的开发服务器。

额外福利：部署到 Vercel

将 Vite 驱动的 React 应用部署到 Vercel 时，添加 vercel.json 以确保客户端路由能够正确处理：

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

总结：为何这次迁移值得投入

从 CRA 迁移到 Vite 将带来翻天覆地的改变。你将拥有更快的开发速度、更短的构建时间以及现代化的 React 工具链。随着 CRA 正式被弃用，转向 Vite 能确保你的 React 项目保持最新、性能卓越。