前端企业应用认证鉴权【免费下载链接】RuoYi-Vue3 (RuoYi)官方仓库 基于SpringBootSpring SecurityJWTVue3 Vite、Element Plus 的前后端分离权限管理系统项目地址https://gitcode.com/yangzongzhuan/RuoYi-Vue3点击查看免费下载RuoYi-Vue3 是若依权限管理系统的官方前端仓库采用 Vue 3 Element Plus Vite 技术栈配套 SpringBoot Spring Security JWT 后端。本文基于仓库 README.md 逐章展开先厘清其在若依三个前端版本中的定位与技术差异再完整走通克隆 → 安装 → 开发 → 构建的运行流程最后深入 Vite 配置、环境文件、应用入口与路由守卫源码并覆盖系统内置的全部 18 项功能读完后你能独立启动该项目前端并理解其权限驱动的动态路由机制。平台定位前后端分离的权限管理系统前端README 明确了本仓库的角色它是 RuoYiv3.9.2前端中基于Vue3 Element Plus Vite的版本后端接口由配套的 RuoYi-Vue 后端仓库提供package.json 中repository字段同样指向该后端仓库。从 package.json 可以看到项目基本信息项目名ruoyi版本3.9.2MIT 协议依赖体系为 ES Moduletype: module核心依赖版本vue 3.5.26、element-plus 2.13.1、pinia 3.0.4、vue-router 4.6.4、axios 1.13.2、echarts 5.6.0、vueuse/core 14.1.0、jsencrypt 3.3.2、nprogress 0.2.0等构建工具链vite 6.4.1、vitejs/plugin-vue 5.2.4、sass-embedded并引入unplugin-auto-import、vite-plugin-compression、vite-plugin-svg-icons三个 Vite 插件。若依三个前端版本的演进对比README 中的版本对比表是选型时的关键依据三个版本并行开发维护维度RuoYi-Vue2RuoYi-Vue3本仓库RuoYi-Vue3-TypeScript前端框架Vue 2Vue 3Vue 3脚本语言JavaScriptJavaScriptTypeScript构建工具Vue CLIViteViteUI 组件库Element UIElement PlusElement Plus状态管理VuexPiniaPinia路由管理Vue Router 3Vue Router 4Vue Router 4核心特点技术栈经典稳定社区资料丰富维护重心已转移现代前端技术栈开发体验与性能更优官方主推的活跃版本类型加持减少沟通成本开发时有提示效率更高多人协作企业级开发项目可以推断本仓库JavaScript Vite是官方主推的活跃版本而需要类型安全与团队协作规范的场景可选择 TypeScript 分支版本。前端运行从零到本地启动README 给出的完整运行步骤如下本文逐步补充了每一步对应的仓库内配置依据# 克隆项目 git clone https://gitcode.com/yangzongzhuan/RuoYi-Vue3 # 进入项目目录 cd RuoYi-Vue3 # 安装依赖 yarn --registryhttps://registry.npmmirror.com # 启动服务 yarn dev # 构建测试环境 yarn build:stage # 构建生产环境 yarn build:prod # 前端访问地址 http://localhost:80对照 package.json 的scripts各命令的真实含义是命令实际执行说明yarn devvite启动开发服务器yarn build:prodvite build生产环境打包yarn build:stagevite build --mode staging测试staging环境打包对应 .env.stagingyarn previewvite preview本地预览打包产物几个实操要点依赖安装README 指定使用yarn并显式指定 npmmirror 镜像源保证国内网络下的安装速度端口为 80开发服务器直接占用 80 端口见下文 Vite 配置若本机 80 端口被占用需要释放或改端口需要后端配合开发代理把/dev-api转发到http://localhost:8080因此本地调试须先启动配套后端默认 8080 端口否则登录等接口全部 502/404。Vite 开发服务器与代理配置vite.config.js 是本地联调的关键// vite.config.js节选 const baseUrl http://localhost:8080 // 后端接口 // ... server: { port: 80, // 开发服务器端口对应 README 中的 http://localhost:80 host: true, // 允许局域网访问 open: true, // 启动后自动打开浏览器 proxy: { // /dev-api 前缀的请求代理到后端并去掉前缀 /dev-api: { target: baseUrl, changeOrigin: true, rewrite: (p) p.replace(/^\/dev-api/, ) }, // springdocOpenAPI v3接口文档代理供系统接口功能使用 ^/v3/api-docs/(.*): { target: baseUrl, changeOrigin: true, } } }从源码结构看代理设计是前缀 环境隔离模式开发环境的请求统一带/dev-api前缀Vite 将其剥离后转发给 8080 端口的 SpringBoot 后端同时^/v3/api-docs/(.*)单独代理 SpringDoc 接口元数据支撑系统内置的系统接口文档页面对应 src/views/tool/swagger/index.vue。三套环境文件与 API 前缀仓库根目录提供三份环境变量文件分别对应三种运行模式文件VITE_APP_ENVVITE_APP_BASE_APIVITE_BUILD_COMPRESS.env.developmentdevelopment/dev-api—.env.stagingstaging/stage-apigzip.env.productionproduction/prod-apigzip三者均定义VITE_APP_TITLE 若依管理系统页面标题。VITE_APP_BASE_API是前后端通信的契约src/utils/request.js 中 axios 实例直接以import.meta.env.VITE_APP_BASE_API作为baseURL因此不同环境打包产物请求的 API 前缀不同——生产部署时 Nginx 需将/prod-api反向代理到后端与开发环境的 Vite 代理形成对称设计。VITE_BUILD_COMPRESS则驱动构建期压缩vite/plugins/compression.js 读取该变量按逗号分隔解析gzip时输出.gz文件、brotli时输出.br文件且deleteOriginFile: false保留原始文件方便未配置压缩的服务器降级使用。打包产物与路径别名vite.config.js 还定义了两类工程化约定别名~指向仓库根目录指向 src扩展名解析顺序覆盖.mjs / .js / .ts / .jsx / .tsx / .json / .vue产物结构dist输出目录下JS 统一为static/js/[name]-[hash].js静态资源为static/[ext]/[name]-[hash].[ext]chunkSizeWarningLimit设为 2000 KB生产构建关闭 sourcemapsourcemap: command build ? false : inline。插件装配逻辑集中在 vite/plugins/index.jsVue 单文件组件、自动导入、setup-extend、SVG 雪碧图常驻注册压缩插件仅在build命令下按环境变量追加。其中 vite/plugins/auto-import.js 对vue、vue-router、pinia三个包的 API 做了自动导入并额外自动导入/utils/dict的useDict与/utils/ruoyi的selectDictLabel——所以在业务代码里可以直接调用ref()、useRouter()、useDict()等而无需手动 import。应用入口全局组件与工具方法装配src/main.js 集中体现了本项目的开箱即用工程思路所有业务页面共享的构件都在这里一次性装配Element Plus 全局配置src/main.js注册zh-cn语言包组件尺寸读取 Cookie 中的size支持large / default / small并引入dark/css-vars.css支持暗色主题全局工具方法挂载src/main.jsuseDict字典、download文件下载、parseTime时间格式化、resetForm表单重置、handleTree树结构处理、addDateRange日期范围参数、getConfigKey系统参数、selectDictLabel / selectDictLabels字典标签翻译——对应 README 中字典管理参数管理等内置功能在页面上的高频调用全局组件注册src/main.jsDictTag字典标签、Pagination分页、FileUpload/ImageUpload/ImagePreview文件与图片上传预览、RightToolbar表格右侧工具条、Editor富文本业务页面直接pagination /、file-upload /即可SVG 图标通过virtual:svg-icons-register注册雪碧图由vite-plugin-svg-icons提供src/assets/icons/svg 目录下的图标以svg-icon icon-classxxx /方式使用权限控制末尾import ./permission引入全局路由守卫是登录态与动态菜单的入口。路由守卫登录态、锁屏与动态权限路由src/permission.js 实现了完整的鉴权引导流程是理解登录后菜单为何动态出现的关键白名单机制src/permission.jswhiteList [/login, /register]无需登录即可访问有 token 场景若访问/login则跳回首页若系统处于锁屏状态useLockStore().isLock则强制进入/lock锁屏页动态路由生成src/permission.js当 Pinia 用户仓库中roles为空时先调用useUserStore().getInfo()拉取用户信息与角色再通过usePermissionStore().generateRoutes()依据后端返回的菜单数据生成可访问路由逐个router.addRoute(route)注册最后return { ...to, replace: true }重新导航以确保路由已生效任何异常则执行logOut()并提示无 token 场景非白名单一律重定向到/login?redirect${to.fullPath}登录成功后回到原目标页NProgress每个beforeEach启动顶部进度条afterEach收尾配合open: true的自动开页提升导航体验。与之配套的静态常量路由与布局组件见 src/router/index.js 与 src/layout锁屏页对应 src/views/lock.vue。内置功能全景18 项README 完整列出了系统的内置功能也是本前端仓库 src/views 目录下各页面的功能来源用户管理系统操作者的用户配置对应 src/views/system/user部门管理组织机构公司、部门、小组树结构展现支持数据权限对应 src/views/system/dept岗位管理用户所属职务配置对应 src/views/system/post菜单管理系统菜单、操作权限、按钮权限标识配置对应 src/views/system/menu角色管理角色菜单权限分配、按机构进行数据范围权限划分对应 src/views/system/role字典管理对系统中常用的较为固定的数据进行维护对应 src/views/system/dict参数管理系统动态配置常用参数对应 src/views/system/config通知公告通知公告信息发布维护对应 src/views/system/notice操作日志系统正常/异常操作日志记录与查询对应 src/views/monitor/operlog登录日志登录日志记录查询含登录异常对应 src/views/monitor/logininfor在线用户当前系统活跃用户状态监控对应 src/views/monitor/online定时任务任务在线增删改与执行结果日志对应 src/views/monitor/jobCron 表达式可视化编辑见 src/components/Crontab代码生成前后端代码生成java、html、xml、sql支持 CRUD 下载对应 src/views/tool/gen系统接口根据业务代码自动生成 API 接口文档对应 src/views/tool/swagger即前文 SpringDoc 代理的消费端服务监控监视当前系统 CPU、内存、磁盘、堆栈等信息对应 src/views/monitor/server缓存监控缓存信息查询与命令统计对应 src/views/monitorRedis 命令统计面板在线构建器拖动表单元素生成相应 HTML 代码对应工具生成器src/utils/generator连接池监视监视数据库连接池状态可分析 SQL 找出性能瓶颈对应 src/views/monitor/druid。页面级权限还通过指令层加固src/directive/permission/hasPermi.js 与 hasRole.js 分别按按钮权限标识与角色控制 DOM 显隐与路由守卫形成菜单级 按钮级两级权限体系。在线体验与延伸阅读README 提供官方在线体验环境默认账号为admin / admin123演示地址与文档地址以 README.md 在线体验小节为准。若要在本地完整跑通登录前提条件归纳为已启动配套后端SpringBoot默认http://localhost:8080数据库与 Redis 按后端仓库要求初始化前端执行yarn --registryhttps://registry.npmmirror.com yarn dev浏览器访问http://localhost:80由 vite.config.js 的port: 80决定使用 admin/admin123 登录。生产部署时按yarn build:prod生成dist目录JS/资源按static/分类输出、默认开启 gzip 压缩交由 Nginx 托管并配置/prod-api反向代理即可灰度或预发环境可使用yarn build:stage/stage-api前缀隔离接口路由。赞分享前端企业应用认证鉴权【免费下载链接】RuoYi-Vue3 (RuoYi)官方仓库 基于SpringBootSpring SecurityJWTVue3 Vite、Element Plus 的前后端分离权限管理系统项目地址https://gitcode.com/yangzongzhuan/RuoYi-Vue3点击查看免费下载相关推荐Crawlab前端技术栈Vue3Element Plus实战Crawlab前端技术栈Vue3Element Plus实战 Crawlab作为一款分布式爬虫管理平台其前端架构采用了Vue 3 TypeScript网页爬虫后端任务调度前端landashu/easyai-plus Vue3前端技术栈深度解析landashu/easyai plus Vue3前端技术栈深度解析 引言AI训练平台的前端架构革命 你是否还在为复杂的AI训练平台前端开发而头疼面对多模块人工智能大模型AI Agent后端前端工作流自动化RAG工具调用MCP ClientsRuoYi-Vue3项目实现Element-Plus深色模式技术解析RuoYi Vue3项目实现Element Plus深色模式技术解析 深色模式在现代Web应用中的重要性 随着用户对界面体验要求的不断提高深色模式 Dark前端企业应用认证鉴权上一篇FreeCodeCamp.cn 终极架构解析10个核心组件打造高效编程学习平台下一篇GORM V1完整入门教程从安装到数据库CRUD操作实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考