利用 Vite 快速构建 React 组件

关注

最新推荐文章于 2026-08-18 07:32:38 发布 · 2.1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

【React框架】什么是 Vite？如何使用vite自动生成react的目录？ Vite是一个基于原生 ES Modules 开发的前端构建工具，由 Evan You（Vue 的作者）开发。极速冷启动：因为利用了浏览器原生的 ES Modules，所以在开发时无需等待整个打包过程。高效热更新（HMR）：文件变更后只更新改动部分，极大提升开发效率。简单配置：大部分项目即开箱即用，同时也支持灵活的配置和插件扩展。在文件中，你可以进行各种自定义配置。resolve: {alias: {'@': '/src', // 使用 @ 表示 src 目录},},server: { 阅读详情

你好，我是坚持分享干货的 EarlGrey，翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。

如果我的分享对你有帮助，请关注我，一起向上进击。

本文为编译文章，原文地址见文末。

React

React 是一个免费开源的前端 JavaScript 库，用于构建基于组件的用户界面。它由 Meta 以及由个人开发者和公司组成的社区负责维护。React 可用于开发单页面、移动或服务器渲染应用程序框架。

Vite

Vite 是一款注重速度和性能的下一代前端工具。它由两大部分组成：

一个开发服务器，与本地 ES 模块相比，它提供了丰富的增强功能；
快速热模块替换（HMR）、预捆绑、支持 typescript、jsx 和动态导入。

Why Vite

Vite 是现代网络项目的快速开发工具。它通过改善开发体验来提高速度和性能。

兼容性说明：

Vite 需要 Node.js 版本 18+. 20+. 但是，某些模板需要更高的 Node.js 版本才能运行，如果您的软件包管理器发出警告，请升级。

具体步骤（React + Vite）

React 与 Vite 是构建快速高效网络应用程序的强大组合。Vite 是一款注重速度和开发体验的构建工具，它利用 ES 模块实现更快的构建。以下是如何使用 Vite 构建 React 项目的基本指南：

创建一个新的 React 项目：

您也可以通过额外的命令行选项直接指定项目名称和要使用的模板。例如，要构建一个 Vite + React 项目，请运行

npm create vite@latest

下一步：

下一步

安装 Vite：设置好 React 项目后，导航到项目目录并安装 Vite：

npm install

为 React 配置 Vite：Vite 已内置了对 React 的支持，因此基本使用时无需任何额外配置。不过，如有需要，您可以在项目根目录下使用 "vite.config.js "文件进行自定义配置。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

修改 package.json 脚本：更新 "package.json "文件中的 "脚本 "部分，以便使用 Vite 进行开发：

{
  "name": "react-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.0"
  }
}

移动 React 入口文件（可选）：
默认情况下，Vite 希望应用程序的入口点是 index.html。如果 React 项目的入口文件是 index.js 或其他文件，则可能需要将其移至 index.html。或者，你也可以配置 Vite 使用不同的入口点。
启动开发服务器：
现在，您可以通过运行以下命令来使用 Vite 启动开发服务器：