打包部署若依(RuoYi) Spring Boot 后端和 Vue 前端图文教程

若依(RuoYi) 是一款基于 Spring Boot 和 Vue.js 的快速开发框架。它为开发者提供了一个友好的开发环境和丰富的功能模块。在本文中，我将为大家介绍如何打包和部署若依的 Spring Boot 后端和 Vue 前端。

一、环境准备

在开始之前，请确保你已经安装了以下工具： 1. JDK 1.8+ 2. Node.js 12.x+ 3. Maven 4. MySQL（若使用数据库）

二、打包 Spring Boot 后端

1. 下载若依代码

从若依的GitHub仓库或官方网站下载代码。你可以使用以下命令克隆代码：

bash git clone https://gitee.com/y_project/RuoYi.git

1. 配置数据库

修改 ruoyi-admin/src/main/resources/application-dev.yml 配置文件，设置你的数据库信息：

yaml spring: datasource: url: jdbc:mysql://localhost:3306/ruoyi?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC username: root password: your_password

1. 打包项目

在后台项目根目录下（ruoyi-admin），执行以下Maven命令进行打包：

bash mvn clean package -Dmaven.test.skip=true

打包完成后，你可以在 ruoyi-admin/target 目录下找到一个名为 ruoyi-admin-*.jar 的文件。

1. 运行后端

使用以下命令启动后端服务：

bash java -jar target/ruoyi-admin-*.jar

如果启动成功，你会看到服务正在监听8080端口的提示。

三、打包 Vue 前端

1. 进入前端目录

进入前端项目目录，通常在 ruoyi-ui 文件夹中：

bash cd ruoyi-ui

1. 安装依赖

使用npm安装前端依赖：

bash npm install

1. 构建项目

使用以下命令构建项目：

bash npm run build

构建完成后，你将在 ruoyi-ui/dist 目录下找到构建后的静态资源文件。

四、部署前端

1. 选择服务器

你可以选择 Nginx、Apache 等服务器来部署前端静态文件。这里以 Nginx 为例。

1. 配置 Nginx

创建一个 Nginx 配置文件（例如 /etc/nginx/conf.d/ruoyi.conf），内容如下：

```nginx server { listen 80; server_name your_domain.com; # 替换为你的域名或IP

   location / {
       root   /path/to/your/ruoyi-ui/dist;  # 指向构建后的文件目录
       index  index.html index.htm;
       try_files $uri $uri/ /index.html;
   }

   location /api {  # 用于转发API请求
       proxy_pass http://localhost:8080;  # 代理到后端Spring Boot
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
   }

} ```

保存后，重启 Nginx：

bash sudo systemctl restart nginx

五、访问应用

完成以上步骤后，前端和后端都已成功部署。你可以通过浏览器访问 http://your_domain.com 查看若依的应用。

六、总结

本文介绍了如何打包和部署若依(RuoYi)的 Spring Boot 后端和 Vue 前端。通过简单的几步操作，你就可以将若依快速部署到服务器上，便于后续开发和使用。希望对你有所帮助！