当前位置：首页 > news >正文

若依框架（RuoYi-Vue）前后端分离版——本地启动保姆级教程

news 2026/5/8 15:29:11

若依（RuoYi-Vue）是目前企业级开发中非常受欢迎的一款前后端分离快速开发平台，基于Spring Boot、Spring Security、JWT和Vue全家桶。

很多新手在Clone代码后，往往卡在Redis配置、数据库导入或前端依赖安装这一步。今天这篇文章，我将手把手带你跑起来这个前后端分离版本，新手也能轻松搞定！

📌一、准备工作（环境要求）

在开始之前，请确认你的电脑已经安装好以下工具（版本必须符合要求，否则会各种报错）：

工具	推荐版本	说明
JDK	1.8+（推荐1.8或17）	后端运行环境
Maven	3.5+	后端依赖管理
MySQL	5.7+（推荐8.0）	数据库
Redis	3.0+（推荐5.0）	缓存中间件，必须启动
Node.js	12+（推荐16-20）	前端运行环境
IDE	IDEA / VS Code	后端用IDEA，前端用VS Code

⚠️特别注意
Redis是必须的！若依前后端分离版用Redis做缓存和Token存储，不启动会报错
安装Node.js时记得勾选自动配置环境变量的选项
安装Redis时同样建议勾选PATH，方便命令行直接启动

📥二、下载源码

若依前后端分离版的Gitee仓库地址：

https://gitee.com/y_project/RuoYi-Vue

方式一：Git命令克隆

gitclone https://gitee.com/y_project/RuoYi-Vue.git

方式二：直接下载ZIP

进入Gitee页面 → 点击「克隆/下载」→ 选择「下载ZIP」

下载完成后，用IDEA打开后端项目（RuoYi-Vue文件夹）。

💡 小提示：前后端分离版的项目结构里，前端代码在 ruoyi-ui 文件夹中，后端是其他模块

🗄️ 三、数据库配置（关键步骤）

3.1 创建数据库

打开Navicat或其他MySQL客户端，新建一个数据库：

数据库名：ry-vue（建议保持一致，避免改配置）
字符集：utf8 或 utf8mb4

3.2 导入SQL脚本

在项目根目录下找到 sql 文件夹，里面有两个SQL文件：

ry_xxxx.sql — 系统核心表
quartz.sql — 定时任务表

执行顺序：先执行第一个，再执行第二个

3.3 修改数据库连接配置

找到配置文件：

ruoyi-admin → src → main → resources → application-druid.yml

修改成你自己的数据库账号密码：

spring:datasource:druid:master:url:jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&useSSL=falseusername:root# 你的MySQL账号password:123456# 你的MySQL密码

🔴 四、Redis配置与启动

4.1 启动Redis

Redis安装后，打开终端进入Redis安装目录，执行：

redis-server.exe redis.windows.conf

看到Redis图标和启动成功日志，就说明Redis运行正常了，如下图。

4.2 修改Redis配置（可选）

找到 application.yml 文件中的Redis配置块：

spring:redis:host:localhostport:6379password:# 默认无密码，如有设置则填写database:0

如果Redis没有设置密码，password 留空即可。

🖥️ 五、启动后端项目

5.1 用IDEA打开项目

第一次打开会自动下载Maven依赖，等待3-10分钟（视网速而定）
如果下载慢，可以配置阿里云镜像加速

5.2 找到启动类

依次展开：

ruoyi-admin → src → main → java → com.ruoyi → RuoYiApplication.java

5.3 右键Run

右键点击RuoYiApplication→ 选择Run ‘RuoYiApplication.main()’

5.4 观察控制台

如果看到类似这样的ASCII艺术字，说明后端启动成功：

.____ _ __ _ _ /\\/ ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_|'_| | '_\/ _`|\\\\\\/ ___)||_)|||||||(_||))))'|____|.__|_||_|_||_\__,|/ / / /=========|_|==============|___/=/_/_/_/ :: Spring Boot ::(v2.5.15)...(♥◠‿◠)ﾉﾞ 若依启动成功 ლ(´ڡ`ლ)ﾞ

如下截图所示：

🟢 六、启动前端项目

6.1 用VS Code打开前端代码

前端代码在 ruoyi-ui 文件夹中，用VS Code打开这个文件夹。

6.2 安装依赖

打开终端（快捷键 Ctrl + ~），执行

# 进入前端目录cdruoyi-ui# 安装依赖npminstall

⚠️ 特别注意：如果 npm install 很慢或卡住，可以使用淘宝镜像源

npminstall--registry=https://registry.npmmirror.com

或者永久设置镜像源：

npmconfigsetregistry https://registry.npmmirror.com

6.3 启动项目

依赖安装完成后，执行：

npmrun dev

看到以下信息表示启动成功：

VITE v4.x.x readyinxxx ms ➜ Local: http://localhost:80/ ➜ Network: http://xxx.xxx.xxx.xxx:80/

6.4 访问前端页面

浏览器打开：http://localhost（默认80端口）

输入默认账号密码登录：

用户名：admin
密码：admin123

成功登录后，你就能看到若依的管理后台页面了！🎉

📊 七、完整启动流程图

┌─────────────────┐ │1. MySQL启动 │ → 创建数据库ry-vue，执行SQL脚本 └─────────────────┘ ↓ ┌─────────────────┐ │2. Redis启动 │ → redis-server.exe 必须运行 └─────────────────┘ ↓ ┌─────────────────┐ │3. 修改配置文件 │ → application-druid.yml（数据库密码） └─────────────────┘ ↓ ┌─────────────────┐ │4. 启动后端项目 │ → 运行RuoYiApplication.java └─────────────────┘ ↓ ┌─────────────────┐ │5. 安装前端依赖 │ →npminstall（ruoyi-ui目录） └─────────────────┘ ↓ ┌─────────────────┐ │6. 启动前端项目 │ →npmrun dev └─────────────────┘ ↓ ┌─────────────────┐ │7. 访问登录页面 │ → http://localhost └─────────────────┘

❌ 八、常见报错及解决方案

后端报错：Connection refused: connect（Redis连接失败）
原因：Redis没有启动
解决：启动Redis服务，执行 redis-server.exe
后端报错：Table ‘ry-vue.sys_user’ doesn’t exist
原因：数据库没有导入成功或连错库
解决：检查 application-druid.yml 中的数据库名，确认已执行SQL脚本
后端报错：Failed to configure a DataSource
原因：Maven依赖没下载完或配置文件有误
解决：Reimport Maven（刷新依赖），检查数据库配置
前端报错：Error: Cannot find module
原因：node_modules 依赖未安装
解决：执行 npm install 安装依赖
前端报错：npm install 一直卡住
原因：npm源在国外，下载慢
解决：切换淘宝镜像源 npm config set registry https://registry.npmmirror.com
验证码无法显示或登录失败
原因：Redis未启动或网络不通
解决：确认Redis已启动，检查端口6379是否被占用
端口8080或80被占用
原因：其他程序占用了端口
解决：
修改后端端口：application.yml 中改 server.port
修改前端端口：ruoyi-ui/vue.config.js 中改 port