# reactvts

**Repository Path**: keyvoice/reactvts

## Basic Information

- **Project Name**: reactvts
- **Description**: React + Vite + TypeScript
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-23
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TypeScript + Vite

* 创建项目
```
# 执行命令，生成React + Vite项目，模板TypeScript
pnpm create vite@latest reactvjs -- --template react-ts
或者
npm create vite@latest reactvjs -- --template react-ts
```

* 安装tailwindcss
```
pnpm install -D tailwindcss @tailwindcss/vite
```

* Vite 核心配置

```typescript
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import tailwindcss from '@tailwindcss/vite' // 引入插件

// https://vite.dev/config/
export default defineConfig(({mode}) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())
  const apiBaseUrl = env.VITE_API_BASE_URL

  return {
    // 插件配置：提供 React 编译和热更新支持
    plugins: [
      react(),
      tailwindcss(), // 添加 tailwindcss 插件
    ],
    // 解析配置：设置路径别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    // 服务器配置：设置端口、启动时自动打开浏览器、启动时允许跨域、启动时允许代理
    server: {
      port: 3000,                                        // 端口号
      open: true,                                        // 启动时自动打开浏览器
      host: '0.0.0.0',                                   // 允许所有 IP 访问
      cors: true,                                        // 允许跨域
      proxy: {  // 代理配置
        '/api': {
          target: apiBaseUrl,                            // 代理目标地址
          changeOrigin: true,                            // 允许跨域
          rewrite: (path) => path.replace(/^\/api/, ''), // 将 /api 前缀重写为空
        }
      }
    },
    // 构建配置：设置输出目录和文件名
    build: {
      outDir: 'dist',
      rollupOptions: {
        output: {
          entryFileNames: 'assets/[name].[hash].js',
          chunkFileNames: 'assets/[name].[hash].js',
          assetFileNames: 'assets/[name].[hash].[ext]',
        },
      },
    },
  }
})
```

* index.css配置tailwindcss
```css
/* src/index.css */
@import "tailwindcss";
```

* 项目结构
```
reactvts
  ├── public
  |   └── favicon.svg
  ├── src
  |   ├── api
  |   ├── assets
  |   |   └── logo.svg
  |   ├── components
  |   ├── pages
  |   ├── router
  |   ├── store
  |   ├── utils
  |   ├── App.tsx
  |   ├── index.css
  |   └── main.tsx
  ├── .env
  ├── .env.development
  ├── .env.production
  ├── .gitignore
  ├── eslint.config.js
  ├── index.html
  ├── package.json
  ├── pnpm-lock.yaml
  ├── README.md
  ├── tsconfig.app.json
  ├── tsconfig.json
  ├── tsconfig.node.json
  └── vite.config.ts
```

* 安装依赖
```
pnpm i / pnpm install
```

* 命令运行项目
```
pnpm run dev
pnpm run build
pnpm run preview
pnpm run start

或者

pnpm dev
pnpm build
```