React后台启动器

vitedash-vite-antd-dashboard-template — React 后台模板

作者 shehari007

React 19 + Vite 8 + Ant Design 6 的后台模板，内置 RBAC、多语言、主题定制与测试。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

vitedash-vite-antd-dashboard-template · 桌面端首页

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 React 19、Vite 8、Ant Design 6，纯 JavaScript，无 TypeScript 和状态管理库，代码可读性强。

内置 RBAC 权限控制，包含路由守卫、角色感知导航和权限矩阵页面。

服务层以 mock 数据模拟真实 API，替换为 fetch 调用只需修改一个文件。

支持英文、西班牙语、阿拉伯语，阿拉伯语完整镜像布局。

主题定制通过 ConfigProvider 实现，明暗模式、主色、圆角、密度可实时调整并持久化。

51 个测试，提供 lint、format、test 一体化检查命令。

模板详细介绍

ViteDash 是一个基于 React 19、Vite 8 和 Ant Design 6 的后台管理模板，定位是提供“第二天就能用”的工程基础。它包含 25 个页面，覆盖登录、仪表盘、图表、列表等常见场景，但更突出的是它把权限、数据层、国际化、主题切换这些通常需要自行搭建的部分都预先做好了。模板采用纯 JavaScript 和 JSX，没有引入 TypeScript 或状态管理库，结构清晰，适合作为学习或快速启动的基础。

项目的核心特色在于工程化设计：路由级代码分割使首屏体积控制在 336 kB gzip；服务层以 mock 数据模拟真实 API，替换为 fetch 调用只需改动一个文件；内置基于角色的访问控制（RBAC），路由守卫和侧边栏会根据用户权限动态显示；支持英文、西班牙语和阿拉伯语，其中阿拉伯语完整镜像布局，包括侧边栏。主题定制通过 Ant Design 的 ConfigProvider 实现，明暗模式、主色、圆角、密度均可实时调整并持久化到 localStorage。此外，项目包含 51 个测试，提供 lint、format、test 的一体化检查命令。

需要注意的是，模板中的认证和权限检查仅在前端运行，README 明确提示这只能防止普通用户误入，无法抵御恶意操作，生产环境必须在服务端实施同样的规则。数据层目前是 mock 实现，接入真实 API 时需要替换 src/services 下的文件，并注意 useAsync 钩子对 useCallback 的依赖。部署方面提供了 Vercel、Netlify 和 Docker 配置，但具体生产环境的安全加固（如 httpOnly cookie）需要自行核对和实现。

React后台启动器

适合你的项目吗？

适用场景

需要快速搭建后台管理界面，并希望内置权限、国际化等基础能力的项目。
作为 React 学习项目，理解路由、权限、服务层等架构模式。
需要支持 RTL 布局和多种语言的企业级后台。
需要可定制主题且希望代码结构清晰、易于维护的团队。

适合人群

React 开发者，尤其是刚接触后台项目或想避免从零搭建的团队。
需要演示或内部工具，且对前端权限要求不高、后端会做最终校验的场景。
偏好 JavaScript 而非 TypeScript，希望代码直观易读的团队。

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node 20.19 或更高版本。
2
克隆后执行 npm install，复制 .env.example 为 .env，然后 npm run dev 即可启动，默认无需登录（VITE_REQUIRE_AUTH=false）。
3
若要启用登录，需设置 VITE_REQUIRE_AUTH=true，并使用 README 中提供的演示账号。
4
接入真实 API 时，替换 src/services 下的文件，并注意 useAsync 钩子需配合 useCallback 使用。

查看仓库使用说明