Back to Details

react-vite

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Vite Development

React Vite 开发

Fast React SPA development with Vite.
使用Vite快速开发React单页应用。

Instructions

操作指南

1. Project Structure

1. 项目结构

src/
├── main.tsx           # Entry point
├── App.tsx            # Root component
├── components/
│   ├── ui/            # Reusable UI
│   └── features/      # Feature components
├── hooks/             # Custom hooks
├── lib/               # Utilities
├── pages/             # Page components
├── store/             # State management
├── types/             # TypeScript types
└── styles/            # Global CSS
src/
├── main.tsx           # Entry point
├── App.tsx            # Root component
├── components/
│   ├── ui/            # Reusable UI
│   └── features/      # Feature components
├── hooks/             # Custom hooks
├── lib/               # Utilities
├── pages/             # Page components
├── store/             # State management
├── types/             # TypeScript types
└── styles/            # Global CSS

2. Vite Configuration

2. Vite 配置

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});
typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});

3. Environment Variables

3. 环境变量

bash
undefined
bash
undefined

.env

.env

VITE_API_URL=http://api.example.com VITE_APP_NAME=My App
VITE_API_URL=http://api.example.com VITE_APP_NAME=My App

Usage

Usage

const apiUrl = import.meta.env.VITE_API_URL;
undefined
const apiUrl = import.meta.env.VITE_API_URL;
undefined

4. Path Aliases

4. 路径别名

json
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
json
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

5. React Router Setup

5. React Router 配置

tsx
// src/main.tsx
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// src/App.tsx
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}
tsx
// src/main.tsx
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// src/App.tsx
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

6. Lazy Loading Routes

6. 路由懒加载

tsx
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}
tsx
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

7. Development Scripts

7. 开发脚本

json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx"
  }
}
json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx"
  }
}

References

参考资料