若依框架分离版前后端部署：从0到1的实操指南

---

一、引言

在当今快速发展的软件开发领域，前后端分离架构已成为构建高效、灵活应用程序的主流选择。若依框架分离版作为一款基于 Spring Boot、Vue.js 等主流技术的前后端分离开发框架，凭借其强大的功能、简洁的代码结构以及丰富的插件生态，为开发者提供了便捷的开发体验，极大地提升了开发效率。

对于开发者而言，将若依框架分离版成功部署到生产环境是项目落地的关键一步。然而，部署过程涉及到多个环节，包括环境搭建、配置调整、依赖安装等，每一步都可能遇到各种问题。因此，一份详细且实用的部署指南显得尤为重要。本文将为大家提供一份全面的若依框架分离版前后端部署指南，帮助开发者顺利完成部署工作，让项目快速上线运行。

二、部署前的准备工作

2.1 环境要求

• 后端环境：
  • JDK：建议使用 JDK 1.8 及以上版本，JDK 是 Java 程序运行的基础环境，若依框架基于 Java 开发，需要合适的 JDK 来执行后端代码。
  • Maven：3.0 及以上版本，Maven 是一个项目管理和构建工具，用于管理项目的依赖、构建项目等，在若依框架中，通过 Maven 可以方便地下载和管理项目所需的各种 Java 依赖库。
  • MySQL：5.7 及以上版本，MySQL 作为常用的关系型数据库，若依框架使用它来存储系统的各种数据，如用户信息、菜单权限、业务数据等。
  • Redis：3.0 及以上版本，Redis 是一个高性能的 key - value 存储数据库，在若依框架中主要用于缓存数据，提高系统的访问速度，例如缓存用户的登录信息、菜单数据等，减少数据库的压力。
• 前端环境：
  • Node.js：14 及以上版本，Node.js 是基于 Chrome V8 引擎的 JavaScript 运行时，使得 JavaScript 可以在服务器端运行，若依框架前端基于 Vue.js 开发，需要 Node.js 环境来运行相关的构建工具和脚本。
  • npm：6 及以上版本，npm 是 Node.js 的包管理工具，用于安装、管理前端项目的依赖包，例如安装 Vue.js 及其相关的插件、组件库等。

2.2 工具准备

• 后端开发工具：推荐使用 IntelliJ IDEA，它是一款功能强大的 Java 集成开发环境，具有智能代码补全、代码分析、调试等丰富的功能。在若依框架后端开发和部署过程中，IDEA 可以方便地导入项目、管理 Maven 依赖、进行代码编写和调试，极大地提高开发效率 。例如，通过 IDEA 的 Maven 插件，可以一键进行项目的编译、打包等操作。
• 前端开发工具：可以选择 WebStorm 或者 VSCode。WebStorm 是一款专门为 JavaScript 和前端开发打造的 IDE，对 Vue.js 等前端框架有很好的支持，提供了代码导航、代码检查、重构等功能，方便前端代码的开发和维护。VSCode 则是一款轻量级但功能强大的代码编辑器，通过安装相关的插件（如 Vue.js 插件），也能很好地支持若依框架前端项目的开发，它具有快速启动、占用资源少等优点，并且拥有丰富的扩展生态，开发者可以根据自己的需求安装各种插件来增强其功能。
• 服务器部署工具：如果是在服务器上进行部署，可以使用宝塔面板。宝塔面板是一款简单好用的服务器运维面板，支持 Linux 和 Windows 系统，可以通过 Web 界面轻松管理服务器的环境配置、网站、数据库等。在部署若依框架时，使用宝塔面板可以方便地安装和管理 JDK、MySQL、Redis、Nginx 等服务，还能进行端口管理、文件上传等操作，降低了服务器部署的难度，使得部署过程更加可视化和便捷。

2.3 下载若依框架分离版项目

可以从若依框架的官方网站（http://www.ruoyi.vip/ ）获取下载地址，也可以在常用的代码托管平台如 Gitee（https://gitee.com/y_project/RuoYi-Vue ）上找到项目。

• 下载方式：
  • 使用 Git 克隆：如果本地安装了 Git 工具，可以在命令行中使用 git clone https://gitee.com/y_project/RuoYi-Vue.git 命令将项目克隆到本地指定目录。这种方式的优点是可以方便地获取项目的最新更新，并且便于进行版本管理。
  • 下载 ZIP 包：在代码托管平台页面上，通常会有下载 ZIP 包的选项，点击即可将项目压缩包下载到本地，下载完成后解压到指定目录。
• 注意事项：
  • 版本选择：若依框架会不断更新，在下载时要根据项目需求和稳定性考虑选择合适的版本，一般来说，最新版本可能包含更多的功能和 bug 修复，但如果项目对稳定性要求较高，也可以选择相对稳定的历史版本。
  • 下载完整性：下载完成后，要检查文件的完整性，确保所有文件都正确下载，避免因文件缺失导致后续部署失败。例如，可以查看下载目录下的文件数量和项目结构是否与官方文档描述一致。

三、后端部署步骤

3.1 数据库配置

• 创建数据库：打开 MySQL 数据库管理工具，如 Navicat。在 Navicat 中，点击 “连接” 按钮，新建一个 MySQL 连接，填写正确的主机名（通常是localhost，如果是远程数据库则填写远程服务器地址）、端口号（默认 3306）、用户名和密码，点击 “测试连接” 确保连接成功 。连接成功后，在连接节点上右键点击，选择 “新建数据库”，输入数据库名，例如 “ry-vue”，字符集选择 “utf8mb4”，排序规则选择 “utf8mb4_general_ci”，然后点击 “确定” 完成数据库创建。
• 执行项目 sql 脚本：在若依框架项目的 “sql” 目录下，有 “quartz.sql” 和 “ry_20230223.sql” 等脚本文件（具体文件名可能因版本不同而有所差异） 。在 Navicat 中，选中刚才创建的数据库，右键点击选择 “运行 SQL 文件”，在弹出的文件选择框中找到 “quartz.sql” 文件，点击 “开始” 执行脚本，执行完成后再次运行 “ry_20230223.sql” 脚本。执行过程中，Navicat 会显示脚本的执行进度和结果，如果出现错误，需要根据错误提示检查脚本语法或数据库配置。
• 修改配置文件中数据库连接信息：打开若依框架后端项目的 “ruoyi-admin/src/main/resources/application-druid.yml” 配置文件 。找到以下配置项：

spring:datasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8username: rootpassword: root

将 “url” 中的数据库地址 “127.0.0.1”（如果是远程数据库则修改为远程服务器地址）、端口号 “3306”（如果数据库端口有修改则填写修改后的端口）、数据库名 “ry-vue”（如果创建的数据库名不同则修改为对应的数据库名）；“username” 和 “password” 修改为实际的数据库用户名和密码。

3.2 Redis 配置

• 启动 Redis 服务：如果是在 Windows 系统下，进入 Redis 的安装目录，找到 “redis-server.exe” 文件，双击运行即可启动 Redis 服务 。在 Linux 系统下，可以使用命令 “systemctl start redis”（前提是 Redis 已经安装并配置为系统服务）来启动 Redis 服务。启动成功后，可以通过命令 “redis-cli ping” 来测试 Redis 是否正常运行，如果返回 “PONG”，则说明 Redis 服务正常。
• 在配置文件中修改 Redis 相关配置：打开 “ruoyi-admin/src/main/resources/application.yml” 配置文件 ，找到 Redis 相关配置项：

spring:redis:host: 127.0.0.1port: 6379password:database: 0lettuce:pool:max-active: 8max-wait: -1msmax-idle: 8min-idle: 0

如果 Redis 部署在本地，“host” 通常为 “127.0.0.1”，“port” 默认为 “6379”；如果 Redis 设置了密码，则在 “password” 处填写正确的密码；“database” 表示选择的 Redis 数据库索引，默认为 0。如果 Redis 部署在远程服务器，需要将 “host” 修改为远程服务器的 IP 地址。

3.3 打包后端项目

在 IDEA 中打开若依框架后端项目，在右侧的 “Maven Project” 面板中，展开项目节点，找到 “Lifecycle” 选项 。点击 “clean”，这一步会清理项目之前的编译结果，确保打包的是最新的代码，在清理过程中，IDEA 的控制台会显示清理的进度和结果，如果出现错误，需要根据错误提示解决问题，比如可能是依赖冲突等原因导致清理失败 。清理完成后，点击 “package”，Maven 会开始打包项目，打包过程中会下载项目所需的依赖（如果本地仓库中没有的话），并将项目编译、打包成一个 JAR 包 。打包完成后，在项目的 “ruoyi-admin/target” 目录下可以找到生成的 JAR 包，包名类似于 “ruoyi-admin-4.7.0.jar”（版本号可能因实际情况不同）。

3.4 上传与运行

可以使用 FTP 工具（如 FileZilla）或者服务器管理面板（如宝塔面板）将打包好的 JAR 包上传到服务器 。以 FileZilla 为例，打开 FileZilla，填写服务器的 IP 地址、用户名、密码和端口号，点击 “快速连接” 连接到服务器 。在本地文件浏览器中找到 “ruoyi-admin/target” 目录下的 JAR 包，将其拖动到服务器的目标目录，比如 “/usr/local/project/ruoyi”。

在服务器上通过命令启动服务，使用 SSH 工具连接到服务器，进入 JAR 包所在的目录，执行命令 “nohup java -jar ruoyi-admin-4.7.0.jar &” 。“nohup” 命令用于在后台运行程序，即使关闭 SSH 连接，程序也会继续运行；“&” 符号表示将程序放到后台执行 。启动过程中，服务器的控制台会输出项目的启动日志，可以通过查看日志来判断项目是否启动成功，如果启动失败，需要根据日志中的错误信息进行排查，比如可能是端口被占用、依赖缺失等问题 。可以通过访问服务器的 IP 地址和项目配置的端口号（默认 8080）来验证后端服务是否正常运行，例如在浏览器中输入 “http:// 服务器 IP:8080”，如果看到若依框架的相关页面或者返回正确的接口数据，则说明后端服务部署成功。

四、前端部署步骤

4.1 安装依赖

打开命令行工具，进入若依框架前端项目的 “ruoyi-ui” 目录 。在命令行中执行 “npm install --registry=https://registry.npmmirror.com” 命令，使用 npm 安装项目所需的依赖包 。这里使用了淘宝镜像源 “https://registry.npmmirror.com”，可以加快依赖包的下载速度，因为默认的 npm 官方镜像源在国内访问速度可能较慢 。在安装过程中，npm 会读取项目的 “package.json” 文件，下载并安装其中列出的所有依赖包，包括 Vue.js、Element-UI 等前端框架和库 。如果安装过程中出现依赖冲突的问题，可以尝试使用 “npm i --legacy-peer-deps” 命令进行安装，该命令会强制安装依赖包，忽略版本冲突，但可能会带来一些潜在的风险，所以在使用前要谨慎考虑。

4.2 修改配置文件

找到 “ruoyi-ui” 目录下的 “.env.production” 文件，该文件是前端项目在生产环境下的配置文件 。打开该文件，找到 “VUE_APP_BASE_API” 配置项，其默认值可能是 “//localhost:8080/prod-api” 。将其修改为实际的后端服务地址，例如，如果后端服务部署在服务器 “192.168.1.100” 的 8080 端口上，并且项目上下文路径为 “/prod-api”，则将 “VUE_APP_BASE_API” 修改为 “http://192.168.1.100:8080/prod-api” 。这个配置项用于指定前端项目向后端发送请求时的基础 API 路径，确保前端能够正确地与后端进行通信 。

4.3 打包前端项目

在 “ruoyi-ui” 目录下的命令行中，执行 “npm run build:prod” 命令 。这个命令会根据项目的配置，将前端项目进行打包 。打包过程中，会对 Vue 组件、JavaScript 代码、CSS 样式等进行编译、压缩和优化，最终生成一个 “dist” 目录 。“dist” 目录中包含了打包后的所有静态文件，如 HTML、CSS、JavaScript 文件等，这些文件可以直接部署到 Web 服务器上供用户访问 。打包完成后，可以在 “ruoyi-ui” 目录下看到生成的 “dist” 目录，其结构清晰，包含了项目运行所需的所有前端资源。

4.4 配置 Nginx

• 安装 Nginx：如果是在 Linux 系统上，可以使用包管理器进行安装。以 CentOS 系统为例，执行 “yum -y install nginx” 命令即可安装 Nginx 。安装完成后，可以使用 “systemctl start nginx” 命令启动 Nginx 服务，使用 “systemctl enable nginx” 命令设置 Nginx 开机自启 。在 Windows 系统上，可以从 Nginx 官网（https://nginx.org/en/download.html ）下载安装包，解压后即可使用，进入 Nginx 的安装目录，找到 “nginx.exe” 文件，双击运行即可启动 Nginx 服务。
• 配置 Nginx：找到 Nginx 的配置文件，通常在 “/etc/nginx/nginx.conf”（Linux）或安装目录下的 “conf/nginx.conf”（Windows） 。打开配置文件，在 “server” 块中添加如下配置：

server {listen       80;server_name  your_domain.com; # 修改为你的域名或服务器IPlocation / {root   /path/to/ruoyi-ui/dist; # 修改为前端项目打包后的dist目录路径index  index.html;try_files $uri $uri/ /index.html;}location /prod-api/ {proxy_pass http://backend_server_ip:8080/; # 修改为后端服务的地址和端口proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

上述配置中，“listen 80” 表示 Nginx 监听 80 端口；“server_name” 设置为你的域名或服务器 IP；“location /” 用于处理根路径的请求，将前端项目的 “dist” 目录设置为根目录，并配置当请求的资源不存在时，返回 “index.html” 文件，以支持前端的路由功能 。“location /prod-api/” 用于处理以 “/prod-api/” 开头的请求，通过 “proxy_pass” 将请求反向代理到后端服务地址，同时设置了一些代理头信息，以便后端能够获取正确的请求信息 。配置完成后，保存配置文件，使用 “systemctl restart nginx”（Linux）或在 Nginx 安装目录下执行 “nginx -s reload”（Windows）命令使配置生效 。

五、常见问题及解决方法

5.1 端口冲突

在部署若依框架分离版时，端口冲突是一个常见问题。当多个服务尝试使用同一个端口进行通信时，就会发生端口冲突 。例如，若依框架后端默认使用 8080 端口，如果该端口已经被其他程序占用，如 Tomcat 服务器、另一个 Java 应用程序等，若依框架后端服务就无法正常启动。

• 查看占用端口的方法：
  • Windows 系统：可以使用命令 “netstat -ano | findstr 端口号”，例如要查看 8080 端口的占用情况，执行 “netstat -ano | findstr 8080”，命令执行后会列出所有使用 8080 端口的进程信息，其中 “LISTENING” 状态表示该端口正在被监听，后面的数字是占用该端口的进程 ID（PID） 。
  • Linux 系统：使用 “lsof -i: 端口号” 命令，比如查看 8080 端口，执行 “lsof -i:8080”，会列出占用 8080 端口的进程详细信息，包括进程名、进程 ID、用户等。
• 解决端口冲突的方法：
  • 修改若依框架端口：打开若依框架后端项目的 “ruoyi-admin/src/main/resources/application.yml” 配置文件，找到 “server.port” 配置项，将其修改为其他未被占用的端口，如 8081 ，修改完成后重新打包并启动后端服务。
  • 关闭占用端口的进程：如果确定某个进程占用了所需端口且该进程不再需要运行，可以关闭该进程来释放端口 。在 Windows 系统中，可以通过任务管理器关闭进程，在任务管理器的 “详细信息” 选项卡中，找到对应 PID 的进程，右键点击选择 “结束任务” 。在 Linux 系统中，可以使用 “kill -9 进程 ID” 命令强制关闭进程，例如 “kill -9 12345”（12345 为进程 ID）。

5.2 依赖安装失败

依赖安装失败也是部署过程中可能遇到的问题，原因通常有多种。

• 网络问题：如果网络不稳定或存在代理设置问题，可能导致依赖包无法正常下载。例如，在使用 npm 安装前端依赖时，如果网络波动较大，可能会出现下载中断的情况，报错信息中通常会包含 “network”“timeout” 等关键词 。解决方法是检查网络连接，确保网络稳定，可以尝试使用 ping 命令测试网络连通性，如 “ping www.baidu.com” 。如果是代理问题，可以配置正确的代理信息，在命令行中执行 “npm config set proxy http:// 代理服务器地址：端口号” 和 “npm config set https-proxy http:// 代理服务器地址：端口号”（如果使用 https 连接） ；如果不需要代理，可以执行 “npm config delete proxy” 和 “npm config delete https-proxy” 来删除代理配置。
• 版本不兼容：不同的依赖包之间可能存在版本兼容性问题。比如若依框架前端项目依赖的某些插件，其新版本可能与当前项目所使用的 Vue.js 版本不兼容，在安装时就会报错，报错信息中可能会提示 “peer dependency”（对等依赖）相关的错误 。解决思路是查看报错信息，确定冲突的依赖包版本，尝试降低或升级相关依赖包的版本 。可以在项目的 “package.json” 文件中手动修改依赖包的版本号，然后重新执行 “npm install” 命令安装依赖 。例如，如果 “eslint-loader” 与 “eslint” 版本不兼容，可以在 “package.json” 中找到 “eslint-loader” 和 “eslint” 的配置项，调整版本号后重新安装 。还可以使用 “npm i --legacy-peer-deps” 命令进行安装，该命令会强制安装依赖包，忽略版本冲突，但可能会带来一些潜在的风险，使用前需谨慎考虑。

5.3 前端页面无法访问

当遇到前端页面无法访问的情况时，原因也较为复杂。

• Nginx 配置错误：Nginx 作为前端的 Web 服务器，如果配置错误，会导致前端页面无法正常访问。比如 Nginx 配置文件中 “root” 路径设置错误，指向了错误的前端项目 “dist” 目录，或者 “server_name” 配置与实际域名或 IP 不匹配 。排查方法是仔细检查 Nginx 配置文件，确保 “root” 路径指向正确的前端项目 “dist” 目录，例如 “root /path/to/ruoyi-ui/dist;”，并且 “server_name” 设置为正确的域名或服务器 IP 。还可以使用 “nginx -t” 命令检查 Nginx 配置文件的语法是否正确，如果有错误，根据提示进行修改 。修改完成后，使用 “systemctl restart nginx”（Linux）或 “nginx -s reload”（Windows）命令使配置生效。
• 文件路径错误：前端项目打包后，静态文件的路径可能由于配置问题导致无法正确加载。例如，在前端项目的 “vue.config.js” 文件中，如果 “publicPath” 配置错误，会导致 HTML 页面在引用 CSS、JavaScript 等静态文件时路径错误 。解决方法是检查 “vue.config.js” 文件中的 “publicPath” 配置，确保其符合项目的部署需求 。如果项目部署在根目录下，“publicPath” 可以设置为 “/”；如果部署在某个子目录下，需要设置为对应的子目录路径，如 “/ruoyi/” 。修改完成后，重新打包前端项目并部署到服务器上。

六、总结与展望

通过以上步骤，我们详细地完成了若依框架分离版前后端的部署工作。从前期的环境准备、工具安装，到后端的数据库配置、Redis 配置、项目打包与运行，再到前端的依赖安装、配置修改、打包以及 Nginx 配置，每一个环节都至关重要，任何一个小的疏忽都可能导致部署失败。在部署过程中，我们还针对可能遇到的端口冲突、依赖安装失败、前端页面无法访问等常见问题提供了有效的解决方法。

若依框架分离版凭借其强大的功能和灵活的架构，为我们的开发工作带来了诸多便利。成功部署若依框架分离版后，开发者可以在此基础上快速进行项目的二次开发和功能扩展，实现更多个性化的业务需求。希望读者能够按照本文的指南，顺利完成若依框架分离版的部署，并在实际项目中充分发挥其优势。同时，也欢迎读者在部署过程中分享自己的经验和遇到的问题，共同交流进步，让若依框架在更多的项目中绽放光彩。