Spring Boot + Vue 3 项目部署教程

部署软件安装包（JDK、Maven、Node、MySQL、IDEA、Navicat 等）见文末 相关资源下载合集。

---

你将学到什么

跑通一个典型的 Spring Boot 后端 + Vue 3 前端 项目，最终在浏览器里能打开页面、能登录。
不必先精通 Java 或 Vue，只要会双击安装、复制命令、点运行即可。

部署软件文件夹里通常有这些文件（名称以你下载的为准）：

---

0. 开始前：两件事

1. 打开并读完 【重要】请先阅读.txt（软件的使用方法写在这里）。
2. 建议把所有安装包放在纯英文路径下，例如 D:\deploy，避免 桌面\新建文件夹 这类中文路径导致报错。

---

一、先装环境（按顺序，不要跳步）

下面顺序不能乱：JDK → Maven → Node → MySQL。
装完四类软件后，双击 环境检测.bat，看到 JDK、Maven、Node 均显示正常再继续。

1.1 安装 JDK 21

1. 双击 jdk-21.0.10_windows-x64_bin.exe。
2. 一路「下一步」，安装路径保持默认即可（记住路径，例如 C:\Program Files\Java\jdk-21）。
3. 安装结束后新开一个「命令提示符」或 PowerShell，输入：

若出现 21.0.10 字样，说明 JDK 成功。

说明： Maven 和 Spring Boot 都依赖 JDK，没装 JDK 后面会全部失败。

1.2 安装 Maven 3.8

1. 双击 Apache-Maven-3.8-Setup.exe，按提示安装。
2. 新开命令行，输入：

能看到 Apache Maven 3.8 和 Java version: 21 即成功。

第一次用 Maven 下载依赖可能较慢，属正常现象，保持网络畅通即可。

1.3 安装 Node.js 24

1. 双击 node-v24.15.0-x64.msi。
2. 安装时勾选 Add to PATH（添加到环境变量）。
3. 新开命令行，输入：

分别显示 v24.15.0 和 npm 版本号即可。

1.4 安装 MySQL 8.0

1. 双击 mysql-installer-community-8.0.45.0.msi。
2. 选择 Developer Default 或 Server only 均可；记住你为 root 设置的密码（下文用 你的密码 代替）。
3. 端口保持默认 3306。
4. 安装完成后，可在「服务」里看到 MySQL80 正在运行。

1.5 运行环境检测

双击 环境检测.bat。若某项报错，回到对应小节重装或重启电脑后再测。

---

二、最简单的方式：用命令行启动（推荐先跑通一遍）

不打开 IDEA 也能跑。先确认你已经解压了项目源码压缩包，并找到里面的两个目录（名称因项目而异，常见为）：

• springboot 或 backend — 后端
• vue 或 frontend — 前端

以下用 springboot、vue 举例，请按你压缩包里的实际文件夹名替换。

2.1 初始化数据库

在源码目录中找到 scripts\init-db.bat（或项目文档写的 SQL 导入脚本）：

1. 用记事本打开 springboot/src/main/resources/application.yml，确认里面的 MySQL 密码是否与你安装时一致；不一致就改成你的 root 密码后保存。
2. 右键 → 以管理员身份运行 init-db.bat。
3. 窗口里出现「成功」或「完成」类提示即可关闭。

若项目没有 bat，只有 .sql 文件，可先做第三节 Navicat 导入，再回来启动后端。

2.2 启动后端（Spring Boot）

1. 打开命令行，cd 进入后端目录，注意不要出现英文路径，... 替换成你的真实路径，例如：

1. 执行

1. 等待控制台出现类似 Started xxxApplication，且没有红色 ERROR 停住。
2. 默认后端地址多为：http://localhost:9090

常见坑： 端口被占用时，关闭之前没关干净的 Java 进程，或改 application.yml 里的 server.port。

2.3 启动前端（Vue 3）

再开一个命令行窗口，注意不要出现英文路径（不要关后端窗口），... 替换成你的真实路径：

1. npm install 只需第一次执行，以后改代码可直接 npm run dev。
2. 看到 Local: http://localhost:5173/ 后，用浏览器打开该地址。
3. 演示账号、密码见 交付说明.txt。

2.4 怎么算跑通了？

• 浏览器能打开登录页；
• 能用文档里的账号登录；
• 后端窗口、前端窗口都保持运行，不要关。

命令行方式跑通后，再学 IDEA / Navicat 会更轻松。

---

三、用 IntelliJ IDEA 启动后端（图形界面）

适合不习惯记 Maven 命令的同学。

3.1 安装与激活 IDEA

1. 双击 idealU-2024.1.7.exe 安装 IntelliJ IDEA Ultimate。
2. 激活方式见压缩包 IDEA激活-Win系统.zip 内说明，按步骤完成即可。
3. 首次启动可选中文界面。

3.2 用 IDEA 打开后端项目

1. 启动 IDEA → Open，选择 springboot 文件夹（含 pom.xml 的那一层）。
2. 右下角若提示 Load Maven Project，点 Load / Trust Project，等待依赖下载完成（首次较慢）。
3. 左侧找到带 @SpringBootApplication 注解的启动类（常见名：XxxApplication.java）。
4. 在类名左侧绿色三角 → Run，或右键 Run 'XxxApplication'。
5. 下方 Run 窗口出现 Started 即后端已启动。

3.3 在 IDEA 里改配置（可选）

• 数据库连接：src/main/resources/application.yml 或 application.properties。
• 常见项：spring.datasource.url、username、password，需与 MySQL、Navicat 里一致。
• 改完后重新点运行启动类。

3.4 前端仍建议用命令行

IDEA 主要管 Java 后端。前端在 IDEA 底部 Terminal 里同样可以：

路径 ..\vue 表示从 springboot 的上一级进入 vue，按你的目录结构调整。

---

四、用 Navicat 管理数据库（导入 SQL、查数据）

适合想「看见」表和数据、方便排错的同学。

4.1 安装 Navicat

双击 Navicat V16.0.10—一键安装版（无需破解）.exe，按提示安装。

4.2 连接本机 MySQL

1. 打开 Navicat → 连接 → MySQL。
2. 填写：

• 连接名：随意，如 本地MySQL
• 主机：localhost 或 127.0.0.1
• 端口：3306
• 用户名：root
• 密码：安装 MySQL 时设置的密码

3. 点 测试连接 → 成功 → 确定。

4.3 导入项目 SQL

1. 双击刚建的连接，展开。
2. 若项目要求新建库：右键连接 → 新建数据库，名称与 application.yml 里一致（如 your_db），字符集选 utf8mb4。
3. 选中该数据库 → 菜单 运行 SQL 文件（或 查询 → 新建查询 → 打开 .sql 执行）。
4. 选择项目提供的 system.sql 或文档指定脚本 → 运行。
5. 左侧 表 里能看到 user、admin 等表即导入成功。

4.3 日常会用到 Navicat 做什么？

---

五、推荐日常开发流程（小结）

---

六、常见问题（小白向）

Q1：java / mvn / node 不是内部或外部命令

• 说明环境变量未生效：重启电脑，或重新安装并勾选加入 PATH。
• 再运行 环境检测.bat。

Q2：mvn spring-boot:run 一直下载或失败

• 检查网络；关闭代理或配置 Maven 国内镜像（可搜索「Maven 阿里云镜像 settings.xml」）。
• 确认 JDK 为 21：java -version。

Q3：npm install 报错 / 很慢

• 可切换镜像：npm config set registry https://registry.npmmirror.com
• 删除 vue 下的 node_modules 文件夹后重新 npm install。

Q4：前端能开，登录提示网络错误或 404

• 后端是否已启动？浏览器访问后端文档地址（若有 Swagger，多为 /doc.html 或项目说明里的地址）。
• 前端 .env 或 vite.config 里的 接口地址 是否指向后端端口（如 9090）。

Q5：数据库连接失败

• MySQL 服务是否运行；
• application.yml 密码是否与 Navicat 能连上的密码一致；
• 数据库名是否已创建并导入 SQL。

Q6：端口被占用

• 后端改 server.port；前端 Vite 会提示换端口，按提示访问新地址即可。

---

使用声明

本教程与配套源码仅供学习参考。毕设或课程作品请结合自己的课题做功能扩展与修改，勿原封不动照搬提交。

部署仍无法解决时，请先核对 【重要】请先阅读.txt 与项目内「部署教程」；需要进一步协助可通过 DevCode 站内「联系作者」咨询。

---

相关资源下载合集