vite搭建react，集成less，配置alias别名，配置proxy跨域，vite环境变量和模式，使用react-router-dom路由，状态管理Redux，配置Ant Design样式库

时光从指尖划过

已于 2025-03-04 11:51:41 修改

阅读量1.6k

点赞数 12

文章标签： react.js

于 2025-03-04 09:37:16 首次发布

本文链接：https://blog.csdn.net/time__flies_/article/details/145993177

版权

一、使用vite搭建react项目

1、确保你已经安装了Node.js（建议使用最新的稳定版本）。

2、使用npm命令安装Vite CLI工具，再来创建项目

npm create vite@latest my-vite-app

3、选择需要的选项，例如选择JavaScript或TypeScript作为项目的编程语言。
在这里插入图片描述
Vanilla：原生js，没有任何框架集成
Vue：vue3框架，只支持 vue3
React：react框架
Preact：轻量化 react 框架
Lit：轻量级web组件
Svelte：svelte 框架
Others：其他

SWC是JavaScript编译工具比Babel要快，但是在功能和插件生态系统方面Babel更完善
在这里插入图片描述

4、安装完成后，你可以通过以下命令启动开发服务器：

cd my-react-app
npm install 安装package.json中的依赖包
npm run dev

5、初始化目录
在这里插入图片描述

二、集成less

1.配置less

Less是 Css 预处理语言，支持变量、嵌套，mixin 和导入等功能，可以极大的简化 css写法

npm install less -D
npm install less-loader -D

安装好了之后就可以了

import './App.less'

2、在 vite.config.ts 中配置

css: {   
	// css预处理器   
	preprocessorOptions: {
	    less: {
	      	// 支持内联 JavaScript
	      javascriptEnabled: true,  // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置
	      charset: false,
	      modifyVars: { // 更改主题在这里
	          'primary-color': '#52c41a',
	          'link-color': '#1DA57A',
	          'border-radius-base': '2px'
	        },
	      // additionalData: '@import "./src/assets/style/global.less";',
	    }, 
   }, 
},

三、配置 alias 别名

vite.config.ts 中配置

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
})

但配置过后，页面仍然报错，找不到该模块。
在 tsconfig.json或 tsconfig.app.json文件中再次进行如下配置，即可解决：

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

四、配置 proxy 跨域

在 vite.config.ts 中配置

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    server: {
        port: 3000, // 开发环境启动的端口
        host: '0.0.0.0',
        // open: true, // 项目启动时自动打开浏览器
        proxy: {
            '/api': {
                target: 'http:xxxxxx', // 当遇到 /api 路径时，会将其转换成 target 的值
                changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
                // 一般情况下，配置上面两个即可
                // secure: false,      // 如果是 https 接口，需要配置这个参数
                // rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
            }
        }
    }
})

五、环境变量和模式

vite官网环境变量和模式

首先在项目根目录下创建三个文件，分别对应全局环境、开发环境、生产环境。
在这里插入图片描述
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略

.env

NODE_ENV = env

VITE_NAME = '全局环境'
VITE_API_URL=''

.env.development

NODE_ENV = development

VITE_NAME = '开发环境'
VITE_API_URL='/api'
VITE_TARGET ='http://.....'

.env.production

NODE_ENV = production

VITE_NAME = '生产环境'
VITE_API_URL = ''
VITE_TARGET ='https://xxx.com/'

vite.config.ts中配置跨域

import react from "@vitejs/plugin-react-swc"
import { defineConfig, loadEnv } from "vite"

export default defineConfig(({ mode }) => {
  const config = loadEnv(mode, "./")

  return {
    plugins: [react()],
    // 配置跨域
    server: {
      port: 8888,
      host: "192.168.31.207",
      proxy: {
        "/api": {
          target: config.VITE_TARGET,  // 会自动判断当前环境，对应上述三个文件中的target
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  }
})

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined

环境变量解析
如上所示，VITE_SOME_KEY是一个数字，但在解析时会返回一个字符串。布尔类型的环境变量也会发生同样的情况。在代码中使用时，请确保转换为所需的类型。

六、使用 react-router-dom 路由

1、使用 npm / yarn 命令下载

npm install react-router-dom -S
yarn add react-router-dom -S

2 创建路由实例

目标文件：src/router/index.js；

// 导入创建路由的函数
import { createBrowserRouter } from 'react-router-dom';

import App from '../App.tsx';

// 创建router路由实例对象，并配置路由对应关系（路由数组）
const router = createBrowserRouter([
  {
    // 需要访问的路径
    path: '/',
    // 和路径对应的组件
    // 和 Vue 不同的是，此处是使用 element 接收 组件 或 jsx 的
    // 此处写 jsx 是为了演示，在实际开发中，这里写的是组件
    element: <App />,
    children: [
      //xxx  多级路由配置
    ]
  }
]);

export default router;

懒加载

import { createBrowserRouter } from 'react-router-dom'
import { lazy } from 'react'
//引入懒加载的形式:
const App = lazy(() => import('@/App.tsx'))

const routes = createBrowserRouter([
  {
    path: '/',
    element: <App />, //(xxx组件)
    children: [
      //xxx  多级路由配置
    ]
  }
])

export default routes

// App.jsx
import { Outlet } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <div>
      App

      {/* 子路由 */}
      <Outlet></Outlet>
    </div>
  );
}
export default App;

3 注入路由实例

目标文件：src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';

import { RouterProvider } from 'react-router-dom';
import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // React.StrictMode 为整个应用启用严格模式  -- 严格模式下，组件渲染两次
  <React.StrictMode>  
    {/* 使用 redux 的时候，需要用 Provider 包裹 RouterProvider */}
    {/* 路由绑定，注入路由实例对象 */}
    <RouterProvider router={router} />
  </React.StrictMode>
);

七、状态管理Redux

https://www.redux.org.cn/

Redux 是 JavaScript 状态容器，提供可预测化的状态管理

React-Redux

Redux 可以集成到任何的 UI 框架中，其中最常见的是 React 。React-Redux 是我们的官方包，它可以让 React 组件访问 state 片段和 dispatch actions 更新 store，从而同 Redux 集成起来。

Redux Toolkit

Redux Toolkit 是我们推荐的编写 Redux 逻辑的方法。它包含我们认为对于构建 Redux 应用程序必不可少的包和函数。 Redux Toolkit 构建是我们建议的最佳实践中，简化了大多数 Redux 任务，预防了常见错误，并使编写 Redux 应用程序变得更加容易。

安装 Redux Toolkit 和 React-Redux

npm install @reduxjs/toolkit react-redux --save

7.1、创建 store 实例

7.1.1 创建子store 实例

目标文件：src/store/modules/counterStore.js;
子store：

// 导入创建 store 的方法
import { createSlice } from '@reduxjs/toolkit';

const counterStore = createSlice({
  // 必填项
  name: 'counter',

  // 初始状态数据
  initialState: {
    count: 0
  },

  // 修改数据 - 同步方法
  reducers: {
    // 增方法
    increment: (state) => {
      state.count++;
    },

    // 减方法
    decrement: (state) => {
      state.count--;
    }
  }
});

// 解构出创建 action 对象的函数（actionCreater）
// 并以 按需导出 的方式 导出 actionCreater
export const { increment, decrement } = counterStore.actions;

// 以默认导出的方式导出 reducer函数
export default counterStore.reducer;

7.1.2 组合子store实例，创建根store实例

目标文件：src/store/index.js;

根store：

// 导入组合函数
import { configureStore } from '@reduxjs/toolkit';
// 导入 子store 模块
import counterReducer from './modules/counterStore';

// 该方法会生成一个 根store
const store = configureStore({
  reducer: {
    // counter ===> 子store模块名：后面在组件中使用store数据的时候会用到
    counter: counterReducer
  }
});

export default store;

优化：
在后续，我们需要使用对应store模块中的数据，我们都是从 ./store/modules/xxx.js 中进行按需导入；如果一个文件中，需要使用不同模块的数据，这样就显得很麻烦；

优化处理：
我们可以将子模块中所有的按需导出，先导入到 ./store/index.js 中，然后从 index.js 中导出；

// 只需在 inde下.js 中添加此代码即可
export * from './modules/xxx';

7.2 为 React 注入 store 实例

recat-redux 负责把 Redux 和 React 链接起来，内置 Provider组件（该插件的内置组件）通过 store 参数把创建好的 store实例注入到应用中，链接正式建立；

目标文件：src/main.tsx；

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { RouterProvider } from 'react-router-dom';
import router from './router';

// 导入 根store
import store from './store';
// 导入 react-redux 的内置组件 Provider
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 使用 Provider内置组件，将 App根组件 包裹起来，使用 store 参数，将 根store实例 传入组件 */}
    {/* 配合 路由 使用的时候，需使用 Provider 组件包裹路由的 RouterProvider 组件*/}
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

参考网址：https://juejin.cn/post/7326268989011869705

八、配置 Ant Design 样式库

引入

npm install antd --save
or
yarn add antd

在页面中使用

import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;