RuoYi-Vue革命性升级：SpringBoot 3.x + Vue3整合指南

2026-02-05 04:09:36作者：宣聪麟

你是否还在为传统权限管理系统的繁琐配置而头疼？是否渴望一个既能满足企业级安全需求，又能提供现代化开发体验的解决方案？本文将带你探索RuoYi-Vue的最新升级，手把手教你如何基于SpringBoot 3.x和Vue3构建高效、安全的前后端分离权限管理系统。读完本文，你将掌握两大框架的无缝整合技巧，轻松应对复杂业务场景，显著提升开发效率。

技术架构概览

RuoYi-Vue作为一款成熟的权限管理系统，其最新版本采用了业界领先的技术栈组合。后端基于SpringBoot 3.x，充分利用了其对Java 17的原生支持和增强的性能优化；前端则升级至Vue3，配合Element Plus组件库，打造出更加流畅的用户体验。

系统整体采用前后端分离架构，通过JWT（JSON Web Token）实现无状态的身份认证。后端采用分层设计，核心模块包括：

权限认证模块：ruoyi-framework/
用户管理模块：ruoyi-system/
定时任务模块：ruoyi-quartz/

前端项目结构清晰，主要由以下部分组成：

页面组件：ruoyi-ui/src/views/
公共组件：ruoyi-ui/src/components/
状态管理：ruoyi-ui/src/store/

环境准备与项目初始化

开发环境要求

在开始整合之前，请确保你的开发环境满足以下要求：

JDK 17或更高版本
Node.js 14.x或更高版本
Maven 3.6.x或更高版本
MySQL 8.0或更高版本

项目克隆与依赖安装

首先，克隆RuoYi-Vue项目到本地：

git clone https://gitcode.com/GitHub_Trending/ru/RuoYi-Vue.git
cd RuoYi-Vue

后端项目构建：

mvn clean install -Dmaven.test.skip=true

前端依赖安装：

cd ruoyi-ui
npm install

数据库配置

创建数据库并导入初始化脚本：

CREATE DATABASE ruoyi_vue CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
use ruoyi_vue;
source sql/ry_20250522.sql;
source sql/quartz.sql;

修改数据库配置文件 ruoyi-admin/src/main/resources/application-druid.yml：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/ruoyi_vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root
    password: password

SpringBoot 3.x后端升级要点

依赖版本调整

修改根目录下的 pom.xml，更新SpringBoot版本：

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.2.0</version>
    <relativePath/>
</parent>

同时，确保所有Spring相关依赖与SpringBoot 3.x兼容，特别是Spring Security和Spring Data JPA等核心组件。

核心配置变化

SpringBoot 3.x中，一些配置属性发生了变化，需要相应调整：

数据源配置：ruoyi-framework/src/main/java/com/ruoyi/framework/config/DruidConfig.java
安全配置：ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java
JWT配置：ruoyi-framework/src/main/java/com/ruoyi/framework/config/JwtConfig.java

启动类调整

更新SpringBoot应用启动类，移除已过时的注解：

@SpringBootApplication
@EnableCaching
@EnableAsync
public class RuoYiApplication {
    public static void main(String[] args) {
        SpringApplication.run(RuoYiApplication.class, args);
    }
}

Vue3前端升级指南

项目依赖更新

修改前端项目的 ruoyi-ui/package.json，更新核心依赖：

"dependencies": {
  "vue": "^3.3.0",
  "vue-router": "^4.2.0",
  "vuex": "^4.0.2",
  "element-plus": "^2.4.0",
  "axios": "^1.4.0"
}

安装新的依赖：

npm install

核心模块改造

入口文件调整：ruoyi-ui/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
  .use(store)
  .use(router)
  .use(ElementPlus)
  .mount('#app')

路由配置升级：ruoyi-ui/src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 路由配置
  ]
})

export default router

状态管理改造：ruoyi-ui/src/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    // 状态定义
  },
  mutations: {
    //  mutations定义
  },
  actions: {
    // actions定义
  },
  modules: {
    // 模块定义
  }
})

组件开发示例

以用户管理列表组件为例，展示Vue3的Composition API用法：

<template>
  <el-table v-loading="loading" :data="userList">
    <el-table-column label="用户ID" prop="userId" width="80" />
    <el-table-column label="用户名称" prop="userName" />
    <el-table-column label="部门" prop="dept.deptName" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listUser } from '@/api/system/user'

const loading = ref(false)
const userList = ref([])

const getList = async () => {
  loading.value = true
  try {
    const response = await listUser()
    userList.value = response.rows
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getList()
})

const handleEdit = (row) => {
  // 编辑操作
}

const handleDelete = (row) => {
  // 删除操作
}
</script>

系统功能演示

用户管理模块

用户管理模块是系统的核心功能之一，提供了用户信息的增删改查等操作。在Vue3版本中，该模块采用了新的表格组件和表单组件，提升了用户体验。

主要功能包括：

用户列表展示：ruoyi-ui/src/views/system/user/index.vue
用户添加/编辑：ruoyi-ui/src/views/system/user/profile/
用户角色分配：ruoyi-ui/src/views/system/user/authRole.vue

权限控制模块

权限控制是系统的安全核心，基于RBAC（角色基础访问控制）模型实现。升级后的系统在权限粒度和控制方式上更加灵活。

权限控制主要通过以下模块实现：

菜单管理：ruoyi-ui/src/views/system/menu/
角色管理：ruoyi-ui/src/views/system/role/
权限分配：ruoyi-ui/src/views/system/role/authUser.vue

代码生成工具

系统提供了强大的代码生成功能，可以根据数据库表结构自动生成前后端代码，极大提高开发效率。升级后的代码生成器支持Vue3组件的生成。

代码生成工具的使用步骤：

导入数据库表：ruoyi-ui/src/views/tool/gen/importTable.vue
配置生成参数：ruoyi-ui/src/views/tool/gen/genInfoForm.vue
生成代码并下载：ruoyi-ui/src/views/tool/gen/index.vue

部署与运维

后端部署

使用Maven打包后端项目：

mvn clean package -Dmaven.test.skip=true

生成的jar包位于 ruoyi-admin/target/ 目录下，使用以下命令启动：

java -jar ruoyi-admin.jar --spring.profiles.active=prod

前端部署

构建前端项目：

cd ruoyi-ui
npm run build:prod

生成的静态文件位于 ruoyi-ui/dist/ 目录下，可通过Nginx等Web服务器部署。

Nginx配置示例：

server {
    listen 80;
    server_name ruoyi-vue.example.com;

    location / {
        root /path/to/ruoyi-ui/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}