通过

在适用于 Linux 的 Windows 子系统上安装 React

本指南介绍如何使用 Vite 前端工具在 WSL （适用于 Linux 的 Windows 子系统）上设置 React 开发环境。

如果计划部署到 Linux 服务器、使用 Docker 容器或使用基于 Bash 的工具，建议使用 WSL。 如果你不熟悉 React，并且只想快速开始，请考虑 直接在 Windows 上安装 React 。

有关 React 的背景和不同的方案（Web 应用、移动应用（React Native）和本机桌面应用（React Native for Desktop），请参阅 React 概述。

先决条件

  • WSL 2：使用 Linux 分发版安装 WSL（建议使用 Ubuntu），并确认它是否在 WSL 2 模式下运行： wsl -l -v 需要 Windows 10 版本 2004 或更高版本或 Windows 11。
  • WSL 2 上的Node.js：使用 nvm 在 WSL 分发中安装 Node.js。 请勿在 WSL 中使用 Windows 安装的 Node.js 版本。

重要

将项目文件存储在 WSL 文件系统（例如， ~/projects）中，而不是存储在装载的 Windows 驱动器上（/mnt/c/）。 跨文件系统边界工作会显著降低安装和生成时间。

创建 React 应用

  1. 打开 WSL 终端（例如 Ubuntu）。

  2. 创建新的项目文件夹并输入它：

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. 使用 Vite 创建新的 React 应用：

    npm create vite@latest my-react-app -- --template react

    Vite 将在文件夹中搭建新的 React 项目 my-react-app 。

  4. 导航到新的应用文件夹并安装依赖项：

    cd my-react-app
npm install

  5. 启动本地开发服务器：

    npm run dev

    你的应用将在 http://localhost:5173 可用。 使用 Ctrl+C 停止服务器。

  6. 准备好部署时，请构建生产环境包：

    npm run build

    输出放置在 dist 文件夹中。 请参阅 部署静态站点 以查看托管选项。

注意

Vite 非常适合单页应用（SPA）。 如果需要服务器端呈现或 Node.js 后端，请考虑改为 Next.js 。 有关静态站点生成，请参阅 Gatsby。

其他资源

  • Last updated on