如今的前端框架基本以 React 和 Vue 为主， Vite 好似与Vue更配，但是对 React的支持也是很友好的，在我们使用 React脚手架初始化项目时候，默认使用的还是 Webpack，当我们开发项目到达一定的程度，Webpack的构建时间就会很长，所以尝试使用Vite来替换，Vite 开发环境下使用 esbuild，他不会对整个项目打包，使得他的项目运行速度非常快，开发体验也就比 Webpack 要好。

兼容性注意 Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

npm create vite@版本号 my-app

生成框架如下：

基本框架的搭建实现一个可以路由跳转的功能

routerCOnfig.ts

 
import { lazy } from "react";
// 引入路由类型
import { RouterItem, RouterList } from "../utills/type";
 
// 定义二级路由，包含具体的页面路径和元素，以及标题
export const homeRouters: RouterItem[] = [
    {
        path: '/home/index',
        element: lazy(() => import('../Views/Index/index')),
        title: "首页"
    },
    {
        path: '/home/project',
        element: lazy(() => import('../Views/Project/index')),
        title: "项目"
    },
 
 
]
 
// 定义一级路由配置，使用history模式
// 包含根路径重定向、home路由、Login路由和默认错误页面
const routerList: RouterList = {
    mode: 'history',
    routes: [
        {
            path: '/',
            to: '/home/index',
        },
        {
            path: '/home',
            element: lazy(() => import('../Views/Home/index')),
            children: homeRouters,// 嵌套子路由
        },
        {
            path: '/login',
            element: lazy(() => import('../Views/Login/index')),
        },
        {
            path: '*',
            element: lazy(() => import('../Views/Error/index')),
        }
    ]
}
export default routerList// 导出路由配置供其他模块使用

utills下的定义路由类型

import { JSXElement } from "react";
 
//定义了路由项的类型，包含了路径、跳转地址、标题、元素、子路由和推送功能
 
export type RouterItem={
    path?: string, // 路径
    to?: string, // 跳转地址
    title?: string, // 标题
    element?: JSXElement, // React元素
    children?: RouteItem[], // 子路由项数组
    push?:any // 推送功能，具体类型根据实际情况定义
}
 
 
//定义了路由列表的类型，包含了模式和路由项数组
 
export type RouterList={
    mode:string, // 模式名称
    routes:RouteItem[] // 路由项数组
}

routerView.tsx

import {Suspense} from 'react' // 导入React库和Suspense组件
import { BrowserRouter,HashRouter,Route,Routes,Navigate } from 'react-router-dom' // 导入React Router相关组件
import routerList from './routerConfig' // 导入路由配置
import { RouterItem } from '../utills/type' // 导入路由项类型定义
 
// 该组件根据routerList配置渲染对应的路由
function RouterView() {
     // 解构获取路由模式和路由数组
    const {mode,routes}=routerList;
 
     //   递归渲染路由数组中的每个路由项
    const rendeRoutes=(arr:RouterItem[])=>{
        return arr && arr.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to?<Navigate to={item.to}></Navigate>:<item.element></item.element>}>
                {
                    // 如果有子路由，递归调用rendeRoutes
                    item.children && rendeRoutes(item.children) 
                }
            </Route>
        })
    }
 
  return (
    // 使用Suspense处理路由组件异步加载状态 白屏优化
    <Suspense fallback={<div>加载中.......</div>}>
        {
            // 根据模式选择渲染BrowserRouter或HashRouter
            mode==="history"?<BrowserRouter>
            <Routes>
                {
                    rendeRoutes(routes) // 根据路由配置渲染路由
                }
            </Routes>
            </BrowserRouter>:<HashRouter>
                  <Routes>
                {
                    rendeRoutes(routes) // 根据路由配置渲染路由
                }
            </Routes>
            </HashRouter>
        }
    </Suspense>
  )
}
 
export default RouterView // 导出路由视图组件

App.tsx导入路由

页面写路由出口以供跳转

配置 less，不需要在 vite.config.ts 中添加任何配置

npm install less less-loader -D

配置 eslint 

npm install eslint --D

npx eslint --init

.eslintrc.json 文件配置

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "react-app"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "no-console": "warn",
        "no-debugger": "warn",
        "no-alert": "warn",
        "camelcase": "warn",
        "react-hooks/rules-of-hooks": "error", 
        "react-hooks/exhaustive-deps": "warn"
    }
}

// 如果不生效可查看是否安装以下依赖，如果没有安装需安装
npm install eslint-plugin-react-hooks eslint-config-react-app -D

配置 alias 别名

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

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

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

 当配置文件中遇到__dirname变量无法正确解析时，可以尝试通过npm安装@types/node开发依赖来解决。安装命令为npminstall@types/node--save-dev，此方法通常能确保类型定义正确，使__dirname在项目中正常工作。

解决方法：安装@types/node

npm install @types/node -D

建议关闭严格模式，因为不能自动检测副作用，有意双重调用。将严格模式注释即可。

 

配置 scss 

npm install sass

 将项目初始化时的global.scss文件，修改为.scss后缀后即可书写sass代码。

vite.config.ts中注册全局样式

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import tailwindcss from "tailwindcss"
// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  // 配置别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // 新增 css 配置
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
    preprocessorOptions: {
      scss: {
        // 两种方式都可以
        additionalData: '@import "@/assets/styles/global.scss";'
        // additionalData: '@use "@/assets/scss/global.scss" as *;'
      }
    }
  }
})