Vite Plugin React Pages 使用教程

Vite Plugin React Pages 使用教程

1. 项目的目录结构及介绍

vite-plugin-react-pages/
├── README.md
├── package.json
├── src/
│   ├── client/
│   │   ├── App.tsx
│   │   ├── index.tsx
│   ├── server/
│   │   ├── index.ts
│   ├── shared/
│   │   ├── constants.ts
├── vite.config.ts

• README.md: 项目介绍和使用说明。
• package.json: 项目依赖和脚本配置。
• src/: 源代码目录。
  • client/: 客户端代码，包含React应用的入口文件。
  • server/: 服务器端代码，包含Vite服务器的入口文件。
  • shared/: 客户端和服务器端共享的代码。
• vite.config.ts: Vite配置文件。

2. 项目的启动文件介绍

客户端启动文件

• src/client/index.tsx: 客户端的入口文件，负责渲染React应用。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

服务器端启动文件

• src/server/index.ts: 服务器端的入口文件，负责启动Vite服务器。

import { createServer } from 'vite';

async function startServer() {
  const server = await createServer({
    configFile: './vite.config.ts',
  });
  await server.listen();
  server.printUrls();
}

startServer();

3. 项目的配置文件介绍

• vite.config.ts: Vite的配置文件，包含项目的构建和开发服务器配置。

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

• plugins: 配置使用的插件，这里使用了@vitejs/plugin-react插件来支持React。
• server: 配置开发服务器的端口。
• build: 配置构建输出目录。