如何使用vite搭建react项目

安装Vite

确保系统已安装Node.js（建议版本≥16.0.0）。通过npm或yarn全局安装Vite：

npm create vite@latest
# 或
yarn create vite

创建React项目

运行命令后按提示操作：

1. 输入项目名称（如my-react-app）。
2. 选择框架为React。
3. 选择语言变体（TypeScript或JavaScript）。

完成后进入项目目录：

cd my-react-app

安装依赖

安装项目所需依赖：

npm install
# 或
yarn

启动开发服务器

运行以下命令启动本地开发环境：

npm run dev
# 或
yarn dev

默认访问地址为http://localhost:5173。

项目结构说明

关键目录和文件：

• src/main.jsx或src/main.tsx：应用入口文件。
• src/App.jsx：根组件。
• vite.config.js：Vite配置文件。

配置调整（可选）

修改vite.config.js可自定义配置：

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000 // 修改默认端口
  }
})

生产环境构建

生成优化后的生产版本：

npm run build
# 或
yarn build

构建结果位于dist目录。

预览生产版本

本地预览构建结果：

npm run preview
# 或
yarn preview