React 基础脚手架示例

流程

搭建基础 Vite 项目

npm create vite@latest

如下：

PS E:\workspace\proj__finance-taxation> npm create vite

> npx
> create-vite

√ Project name: ... finance-taxation
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

Scaffolding project in E:\workspace\proj__finance-taxation\finance-taxation...

Done. Now run:

  cd finance-taxation
  npm install
  npm run dev

运行后，你就得到了一个由 vite 管理的使用 TypeScript 的 React 项目。

npm run dev

引入 Ant Design

Ant Design - 一套企业级 UI 设计语言和 React 组件库

npm install antd --save

引入 SCSS

npm i sass --save-dev

引入路由

此处，我们不考虑服务端渲染（SSR），采用传统的客户端渲染，故选用 React Router6 来管理路由。

npm install react-router-dom

部署

项目开发完成，现在我们要把它部署到生产环境上面。假如，我们的项目要存放到服务器的如下路径 - /usr/html/tax-app/ ，访问时的域名类似 https://domain.com/tax-app/xxx 。

也就是说在生产环境下，站点的 BASE_URL 是 /tax-app/，而不是默认的根路径 / ，后者也是我们开发环境下的默认路径。

我们以 Vite 为例，来展示一下如何正确的配置，使其在开发和生产环境下都得以正确渲染。

首先，在默认的 defineConfig 的配置函数中根据 mode 来区分不同环境下路径，并配置如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


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

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    return {
        base: mode === 'production' ? '/tax-app/' : '/',
        server: {
            proxy: {
                '/api': {
                    target: 'http://192.168.51.211:10100/',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '')
                },
            },
        },
        plugins: [react()],
    }
})

其次，我们还需要同步修改一下路由的生成配置。

1
2
3
4
5
6
7


// ...
// --- 路由配置 src/router/index.tsx ---
const router = createBrowserRouter(routes, {
    basename: import.meta.env.BASE_URL
});

export default router;

如此，即可。