SpringBoot+Vue3博客系统实战：从零搭建前后端分离项目

如果你是一名Java开发者或者正在寻找一个能写进简历、用于毕业设计的完整项目那么“博客管理系统”大概率在你的候选清单里。但你可能也发现了很多教程要么只讲后端要么只讲前端或者代码老旧、环境复杂让你在“跑起来”这一步就卡住半天。今天要聊的这个项目核心价值就一句话它提供了一个能“开箱即用”的、技术栈主流的、前后端分离的博客系统完整实现。它基于 SpringBoot 和 Vue3半小时内就能在你的本地环境跑起来并且包含了从数据库设计到前端展示的完整增删改查逻辑。这听起来像是又一个普通的“Hello World”项目但它的不同之处在于它把“可运行”作为第一优先级解决了新手在整合阶段最常遇到的“前后端联调不通”、“依赖冲突”、“环境配置复杂”等问题。这篇文章不会只给你一个源码链接让你自己去摸索。我会带你从零开始一步步拆解这个项目的核心模块、技术选型背后的考量、环境搭建的每一个细节以及如何将它改造成属于你自己的项目。无论你是想学习前后端分离架构还是急需一个能证明你全栈能力的实战项目这篇文章都能给你一条清晰的路径。1. 为什么你需要一个“可运行”的博客项目在开始技术细节之前我们先明确一个问题市面上开源项目那么多为什么还要专门找一个博客系统来学习或用作毕设首先博客系统的业务模型足够经典且完整。它几乎涵盖了Web开发中最核心的CRUD增删改查操作文章的创建、查询、修改、删除以及分类、标签、评论等关联管理。通过实现一个博客你能系统地练习到数据库设计、RESTful API构建、权限控制、文件上传、富文本编辑、列表分页、条件查询等一系列通用技能。这些技能是相通的未来你开发电商、OA、CMS等系统时底层逻辑大同小异。其次技术栈的“主流性”决定了它的学习价值和简历价值。SpringBoot 作为 Java 后端的事实标准其自动配置、内嵌容器、Starter依赖等特性极大地提升了开发效率。Vue3 作为当前前端主流框架其组合式API、响应式系统、以及丰富的生态如Vite、Pinia、Element Plus代表了现代前端开发的最佳实践。在简历上写“精通 SpringBoot Vue3 开发”远比写“会用 JSP jQuery”更有竞争力。最后也是最重要的一点“可运行”是检验学习成果和项目可用的黄金标准。很多教学项目逻辑看似完整但一旦你 clone 下来就会面临各种环境问题JDK版本不对、Node版本冲突、数据库脚本缺失、配置文件错误、端口被占用……这些问题会消耗你大量的时间和热情。一个真正为学习者考虑的项目应该把“一键启动”作为设计目标之一。我们今天要搭建的这个项目正是朝着这个目标设计的。2. 技术栈全景与核心概念解析在动手之前我们先快速梳理一下项目用到的核心技术栈及其在项目中的角色。理解每个组件的职责能帮助你在遇到问题时快速定位。2.1 后端技术栈 (SpringBoot 生态)SpringBoot 2.x: 项目的基石。它简化了Spring应用的初始搭建和开发过程我们无需再手动配置繁琐的XML。核心是它的“约定大于配置”理念和大量的 Starter 依赖。Spring MVC: 处理Web请求的框架。我们的控制器Controller层就基于它用于接收前端请求调用服务并返回JSON数据。MyBatis-Plus: 一个强大的 MyBatis 增强工具。它提供了通用的 Mapper 和 Service只需简单配置即可实现单表基本的CRUD操作无需编写XML文件极大提升了数据库操作效率。这是本项目后端开发效率的关键。MySQL: 关系型数据库用于持久化存储博客数据如文章、用户、分类、评论等。Maven: 项目构建和依赖管理工具。通过pom.xml文件我们可以清晰地管理项目所需的所有第三方库Jar包。2.2 前端技术栈 (Vue3 生态)Vue 3: 渐进式JavaScript框架。本项目使用其组合式API (script setup) 进行开发代码更简洁逻辑复用更灵活。Vite: 下一代前端构建工具。相比传统的 WebpackVite 在开发阶段启动速度极快提供了丝滑的开发体验。它是 Vue 官方推荐的构建工具。Element Plus: 基于 Vue 3 的桌面端组件库。它提供了丰富、美观且易用的UI组件如按钮、表格、表单、对话框让我们能快速搭建出专业的管理后台界面。Axios: 基于 Promise 的 HTTP 客户端。用于在浏览器中向后端发起 API 请求是前后端通信的桥梁。Vue Router: Vue.js 官方的路由管理器。管理我们博客前台和管理后台的页面跳转逻辑。Pinia (可选但推荐): Vue 官方推荐的状态管理库用于在多个组件间共享状态如用户登录信息。2.3 前后端分离架构这是本项目的核心架构模式。理解它你就理解了现代Web开发的主流方式。前后端分离后端SpringBoot只负责提供数据接口API返回标准的JSON数据。前端Vue3负责渲染页面、处理用户交互并通过AjaxAxios调用后端接口获取或提交数据。优势职责清晰后端专注业务逻辑和数据安全前端专注用户体验和交互逻辑。并行开发前后端可以同时进行只需提前约定好API接口格式通常使用Swagger文档。技术栈灵活后端可以用Java、Go、Python等前端可以用Vue、React、Angular等互不影响。易于扩展同一套后端API可以同时服务于Web端、移动端App、小程序等。3. 环境准备确保你的电脑“弹药”充足在开始克隆和运行项目之前请确保你的开发环境已经就绪。以下是必须安装的软件及其推荐版本。软件名称推荐版本作用验证安装成功的命令JDK1.8 或 11 (LTS版本)运行和编译Java程序java -versionMaven3.6.x 或更高管理Java项目依赖和构建mvn -vNode.js16.x 或 18.x (LTS)运行JavaScript和npm包管理器node -v和npm -vMySQL5.7 或 8.0项目数据库mysql --versionIDE (可选但推荐)IntelliJ IDEA / VS Code后端/前端开发IDE-重要提醒版本兼容性尽量使用推荐的LTS长期支持版本避免使用过新或过旧的版本以减少未知的兼容性问题。环境变量安装JDK、Maven、Node.js后请务必将其bin目录添加到系统的PATH环境变量中这样才能在任意命令行窗口使用javamvnnode等命令。数据库准备启动你的MySQL服务并记住root用户的密码。我们稍后会创建一个新的数据库。4. 项目获取与初步探索假设你已经从提供的资源链接如Gitee或GitHub获取到了项目源码。解压后你通常会看到类似如下的目录结构blog-system/ ├── blog-backend/ # SpringBoot 后端项目 │ ├── src/ │ ├── pom.xml # Maven 依赖配置文件 │ └── ... ├── blog-frontend/ # Vue3 前端项目 │ ├── src/ │ ├── package.json # Node.js 依赖配置文件 │ ├── vite.config.js # Vite 构建配置 │ └── ... └── database/ # 数据库SQL脚本 └── blog_db.sql # 初始化数据库表结构和数据的脚本第一步导入后端项目用 IntelliJ IDEA 打开blog-backend文件夹。IDEA 会自动识别为 Maven 项目并开始下载依赖观察右下角进度条。这个过程取决于网络速度请耐心等待。依赖下载完成后检查项目结构确保没有红色的报错。第二步导入前端项目用 VS Code 打开blog-frontend文件夹。打开终端Terminal执行npm install或yarn来安装项目所需的前端依赖包。这同样需要一些时间。第三步初始化数据库打开你的 MySQL 客户端如命令行、Navicat、MySQL Workbench。创建一个新的数据库例如命名为blog_db字符集选择utf8mb4支持存储Emoji表情。CREATE DATABASE blog_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;使用这个数据库然后运行database/blog_db.sql脚本文件。这个脚本会创建所有必要的表如user,article,category,comment等并插入一些初始测试数据。USE blog_db; SOURCE /你的路径/database/blog_db.sql;完成以上三步你的项目基础环境就搭建好了。接下来是最关键的配置环节。5. 核心配置详解让前后端“握手”成功前后端分离项目跑不起来90%的问题出在配置上尤其是连接信息和跨域问题。5.1 后端配置 (application.yml或application.properties)找到后端项目中的配置文件通常是src/main/resources/application.yml。你需要修改以下几处关键配置# 应用服务器配置 server: port: 8080 # 后端服务启动端口确保不被占用 # Spring 数据源配置 (连接MySQL) spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 修改为你自己的数据库连接信息地址、库名、用户名、密码 url: jdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_mysql_password # 替换成你的真实密码 # 文件上传配置如果你有头像或文章图片上传功能 servlet: multipart: max-file-size: 10MB max-request-size: 100MB # MyBatis-Plus 配置 mybatis-plus: configuration: # 控制台打印SQL日志调试时非常有用 log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: # 全局逻辑删除字段名如果项目用了逻辑删除 logic-delete-field: isDeleted logic-delete-value: 1 logic-not-delete-value: 0 # 自定义配置示例如JWT密钥、文件存储路径等根据项目实际调整 blog: jwt: secret: your-jwt-secret-key-here # JWT令牌密钥生产环境务必修改 expire: 604800 # 令牌过期时间秒7天关键点spring.datasource.url确保localhost:3306是你的MySQL地址和端口blog_db是你创建的数据库名。spring.datasource.password这是最容易出错的地方务必填写正确。server.port记住这个端口默认8080前端将向这个端口发起请求。5.2 前端配置 (vite.config.js和.env文件)前端需要配置两处开发服务器的代理和API基础地址。1. 开发代理配置 (vite.config.js) 为了避免浏览器跨域问题我们在开发环境下配置代理将前端请求转发到后端。// blog-frontend/vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { port: 3000, // 前端开发服务器端口 proxy: { // 配置代理规则 /api: { target: http://localhost:8080, // 后端API地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 重写路径去掉 /api 前缀 // 假设后端接口路径是 /user/login前端请求 /api/user/login 会被代理到 http://localhost:8080/user/login } } } })2. 环境变量配置 (可选但更规范) 可以创建一个.env.development文件来管理开发环境变量。# blog-frontend/.env.development VITE_API_BASE_URL /api然后在你的Axios请求配置中使用这个变量// blog-frontend/src/utils/request.js import axios from axios; const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 读取环境变量 timeout: 5000 }); // ... 其他拦截器配置5.3 跨域问题 (CORS) 的终极解决方案除了前端的开发代理后端也必须处理跨域请求尤其是项目部署到不同域名时。在SpringBoot后端项目中通常需要一个全局的CORS配置类。// blog-backend/src/main/java/com/yourpackage/config/CorsConfig.java package com.yourpackage.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.URLBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); // 允许的源生产环境应设置为具体的域名如 https://www.yourdomain.com config.addAllowedOriginPattern(*); // 开发环境允许所有源生产环境请修改 // 允许的请求方法 config.addAllowedMethod(*); // 允许的请求头 config.addAllowedHeader(*); // 是否允许发送Cookie等凭证 config.setAllowCredentials(true); // 预检请求的缓存时间秒 config.setMaxAge(3600L); URLBasedCorsConfigurationSource source new URLBasedCorsConfigurationSource(); // 对所有接口路径生效 source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }配置好了这三处数据库连接、前端代理、后端CORS前后端通信的道路就基本打通了。6. 项目启动与验证见证系统“活”起来现在让我们按照正确的顺序启动项目并验证核心功能。6.1 启动后端服务在 IntelliJ IDEA 中找到后端的主启动类通常命名为XxxApplication.java例如BlogApplication.java直接运行它的main方法。或者在blog-backend目录下打开命令行使用 Maven 命令启动mvn spring-boot:run看到控制台输出类似Started BlogApplication in 5.123 seconds (JVM running for 5.789)的信息并且没有报错说明后端启动成功。验证后端API 打开浏览器或使用 Postman访问http://localhost:8080/doc.html如果集成了Swagger或直接访问一个简单的健康检查接口如http://localhost:8080/hello如果项目有定义。能收到响应即表示后端正常。6.2 启动前端开发服务器在 VS Code 的终端中确保当前目录是blog-frontend然后运行npm run dev # 或 yarn dev控制台会输出本地访问地址通常是http://localhost:3000。6.3 功能验证访问前端页面在浏览器打开http://localhost:3000。你应该能看到博客系统的前端页面可能是首页或登录页。测试登录功能使用数据库脚本中初始化的账号例如admin / 123456进行登录。观察浏览器开发者工具F12 - Network查看登录请求是否成功发送到http://localhost:8080并返回了 token 等信息。测试文章列表登录后进入文章管理页面查看是否能成功加载文章列表数据。这验证了前端调用后端/api/article/list等接口的能力。测试增删改查尝试创建一篇新文章、编辑它、然后删除它如果是逻辑删除数据不会从数据库物理删除。观察每一步操作后前端列表和数据是否同步更新。如果以上步骤都成功了恭喜你一个完整的前后端分离博客系统已经在你的本地完美运行7. 核心代码模块解析理解项目骨架仅仅能运行还不够我们需要深入代码理解其组织结构和核心逻辑。这是将项目转化为自己知识的关键。7.1 后端代码结构 (MVC MyBatis-Plus)典型的SpringBoot项目结构如下src/main/java/com/yourpackage/ ├── controller/ # 控制层接收请求调用Service返回结果 │ ├── ArticleController.java │ ├── UserController.java │ └── ... ├── service/ # 服务层处理核心业务逻辑 │ ├── impl/ │ │ ├── ArticleServiceImpl.java │ │ └── ... │ ├── ArticleService.java │ └── ... ├── mapper/ # 数据访问层 (DAO)由MyBatis-Plus生成直接操作数据库 │ ├── ArticleMapper.java │ └── ... ├── entity/ # 实体类与数据库表一一对应 │ ├── Article.java │ └── ... └── config/ # 配置类如CORS配置、Swagger配置等 └── ...一个典型的 Service 实现示例// ArticleServiceImpl.java Service public class ArticleServiceImpl extends ServiceImplArticleMapper, Article implements ArticleService { Override public PageArticleVo getArticleList(PageArticle page, ArticleQueryDto queryDto) { // 构建查询条件 LambdaQueryWrapperArticle wrapper new LambdaQueryWrapper(); if (StringUtils.isNotBlank(queryDto.getTitle())) { wrapper.like(Article::getTitle, queryDto.getTitle()); } if (queryDto.getCategoryId() ! null) { wrapper.eq(Article::getCategoryId, queryDto.getCategoryId()); } wrapper.orderByDesc(Article::getCreateTime); // 执行分页查询 PageArticle articlePage this.page(page, wrapper); // 将 Article 分页对象转换为 ArticleVo (视图对象) 分页对象 // 这里可能涉及关联查询分类名称、作者信息等 PageArticleVo voPage new Page(); BeanUtils.copyProperties(articlePage, voPage, records); // 拷贝分页信息 ListArticleVo voList articlePage.getRecords().stream().map(article - { ArticleVo vo new ArticleVo(); BeanUtils.copyProperties(article, vo); // 补充关联数据例如根据 categoryId 查询 categoryName // vo.setCategoryName(categoryService.getById(article.getCategoryId()).getName()); return vo; }).collect(Collectors.toList()); voPage.setRecords(voList); return voPage; } }这段代码展示了如何使用 MyBatis-Plus 的LambdaQueryWrapper构建动态查询条件并进行分页查询。ArticleVo是“视图对象”用于向前端返回更丰富、更定制化的数据而不是直接暴露数据库实体Article。7.2 前端代码结构 (Vue3 Element Plus 路由)典型Vue3项目结构src/ ├── api/ # 集中管理所有后端API请求函数 │ ├── article.js │ └── user.js ├── router/ # 路由配置 │ └── index.js ├── store/ # 状态管理 (Pinia) │ └── user.js ├── views/ # 页面级组件 │ ├── admin/ # 后台管理页面 │ │ ├── ArticleManage.vue │ │ └── ... │ └── blog/ # 博客前台页面 │ ├── Home.vue │ └── ... ├── components/ # 可复用的公共组件 │ ├── Header.vue │ └── ... └── utils/ # 工具函数 └── request.js # Axios 请求封装和拦截器一个典型的 API 请求模块示例// src/api/article.js import request from /utils/request // 获取文章分页列表 export function getArticleList(params) { return request({ url: /article/list, method: get, params // 对应 GET 请求的 query 参数 }) } // 创建文章 export function createArticle(data) { return request({ url: /article, method: post, data // 对应 POST 请求的 body 数据 }) } // 更新文章 export function updateArticle(id, data) { return request({ url: /article/${id}, method: put, data }) } // 删除文章 (逻辑删除) export function deleteArticle(id) { return request({ url: /article/${id}, method: delete }) }在 Vue 组件中调用 APIscript setup import { ref, onMounted } from vue import { getArticleList, deleteArticle } from /api/article import { ElMessage, ElMessageBox } from element-plus const tableData ref([]) const loading ref(false) const queryParams ref({ pageNum: 1, pageSize: 10, title: }) // 加载文章列表 const loadData async () { loading.value true try { const res await getArticleList(queryParams.value) tableData.value res.data.records // ... 处理分页总数等 } catch (error) { ElMessage.error(获取文章列表失败) } finally { loading.value false } } // 删除文章 const handleDelete async (row) { try { await ElMessageBox.confirm(确认删除该文章吗, 提示, { type: warning }) await deleteArticle(row.id) ElMessage.success(删除成功) loadData() // 刷新列表 } catch (error) { // 用户点击了取消 } } onMounted(() { loadData() }) /script template div !-- 搜索表单 -- el-form :inlinetrue :modelqueryParams el-form-item label文章标题 el-input v-modelqueryParams.title placeholder请输入标题 / /el-form-item el-form-item el-button typeprimary clickloadData搜索/el-button /el-form-item /el-form !-- 文章表格 -- el-table :datatableData v-loadingloading el-table-column proptitle label标题 / el-table-column propcategoryName label分类 / el-table-column propcreateTime label创建时间 / el-table-column label操作 template #defaultscope el-button link typeprimary clickhandleEdit(scope.row)编辑/el-button el-button link typedanger clickhandleDelete(scope.row)删除/el-button /template /el-table-column /el-table !-- 分页组件 -- el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagequeryParams.pageNum :page-sizes[10, 20, 50] :page-sizequeryParams.pageSize layouttotal, sizes, prev, pager, next, jumper :totaltotal /el-pagination /div /template这段代码清晰地展示了现代Vue3开发的模式组合式API (script setup)、从API模块引入函数、使用async/await处理异步、配合Element Plus组件快速构建UI、以及状态响应式 (ref)。8. 常见问题与排查思路 (FAQ)在搭建和运行过程中你几乎一定会遇到一些问题。下表列出了最常见的问题及其解决方法。问题现象可能原因排查方式解决方案后端启动失败端口被占用8080端口已被其他程序如另一个SpringBoot应用、Tomcat使用。1. 查看启动日志中的错误信息。2. 命令行执行netstat -ano | findstr :8080(Windows) 或lsof -i:8080(Mac/Linux) 查看占用进程。1. 在application.yml中修改server.port为其他端口如 8081。2. 停止占用8080端口的进程。后端启动失败数据库连接错误1. MySQL服务未启动。2.application.yml中数据库配置URL、用户名、密码错误。3. 数据库blog_db不存在。1. 检查MySQL服务状态。2. 仔细核对配置文件特别是密码中的特殊字符是否需要转义。3. 登录MySQL执行SHOW DATABASES;确认数据库是否存在。1. 启动MySQL服务。2. 修正配置文件。3. 创建缺失的数据库。前端npm install失败1. 网络问题无法连接到 npm 仓库。2. Node.js 版本不兼容。3. 项目依赖包有冲突。1. 检查网络可以尝试使用淘宝镜像npm config set registry https://registry.npmmirror.com。2. 使用node -v确认版本。3. 删除node_modules文件夹和package-lock.json文件重新npm install。1. 切换npm镜像源。2. 使用 nvm 切换Node版本到LTS。3. 清除缓存重装依赖。前端运行后页面空白或JS错误1. 依赖未正确安装。2. 代码语法错误。3. 浏览器缓存。1. 检查终端是否有安装报错。2. 打开浏览器开发者工具 Console 面板查看具体错误信息。3. 尝试无痕模式打开。1. 重新npm install。2. 根据Console错误修复代码。3. 清除浏览器缓存或使用无痕模式。前端能访问但调用API返回404或跨域错误1. 后端服务未启动或端口不对。2. 前端代理配置 (vite.config.js) 错误。3. 后端CORS配置未生效或配置过严。1. 确认后端控制台是否在运行并访问http://localhost:8080/简单接口测试。2. 检查vite.config.js中target地址和端口是否正确。3. 查看浏览器Network面板请求的URL是否正确响应头是否包含Access-Control-Allow-Origin。1. 启动或重启后端。2. 修正代理配置。3. 检查并修正后端的CorsConfig类确保允许前端源。登录成功但后续请求提示“未授权”或“Token无效”1. 前端未正确存储或发送Token。2. 后端Token验证逻辑有问题或密钥不匹配。3. Token已过期。1. 检查登录成功后是否将返回的Token存储到了localStorage或Pinia中。2. 检查Axios请求拦截器是否在每个请求的Header中正确添加了Authorization: Bearer token。3. 检查后端JWT配置的过期时间。1. 完善前端Token存储和发送逻辑。2. 检查后端JWT生成和验证代码确保密钥一致。3. 实现Token自动刷新或提示用户重新登录。新增/修改数据后列表未刷新1. 前端未在操作成功后重新调用查询接口。2. 后端操作成功但返回了错误的状态码前端未处理。3. 前端使用了错误的响应字段判断成功。1. 在新增/修改/删除的成功回调函数中检查是否调用了loadData()方法。2. 查看浏览器Network面板确认后端返回的HTTP状态码和响应体。3. 核对前端代码中判断成功的逻辑如res.code 200。1. 在操作成功的回调中执行列表刷新。2. 根据后端实际返回格式调整前端判断逻辑。3. 统一前后端的响应体格式如{ code: 200, data: ..., message: “成功” }。9. 项目改造与进阶从“能用”到“属于你”成功运行项目只是第一步。要让这个项目真正成为你的作品你需要对它进行改造和深化。9.1 功能增强建议用户权限管理 (RBAC)实现基于角色的访问控制。区分管理员、编辑、普通用户等角色为不同角色分配不同的菜单和操作权限。文章审核流程增加文章“草稿-待审核-已发布”的状态流转编辑提交后需管理员审核才能发布。富文本编辑器升级将基础的文本框替换为功能更强大的编辑器如wangeditor、TinyMCE或Quill支持图片上传、代码高亮、表格等。SEO优化为博客前台页面生成更友好的URL如/article/123改为/article/how-to-learn-springboot并添加meta标签。评论与回复系统实现嵌套评论、邮件通知、敏感词过滤等功能。数据统计仪表盘在管理后台增加图表展示文章数、用户数、访问量等数据。9.2 技术深度拓展引入Redis缓存将热点数据如网站配置、热门文章列表缓存到Redis中减轻数据库压力提升响应速度。集成Elasticsearch实现文章内容的全文检索提供更强大的搜索功能。使用Docker容器化为前后端项目编写Dockerfile和docker-compose.yml实现一键部署让环境搭建更加标准化。接口文档自动化集成SpringDoc OpenAPI(Swagger UI 3)自动生成并维护API文档方便前后端协作。单元测试与集成测试为后端Service层和Controller层编写JUnit单元测试保证代码质量。CI/CD流水线使用GitHub Actions或Jenkins实现代码提交后自动构建、测试和部署。9.3 部署上线后端打包在blog-backend目录下执行mvn clean package -DskipTests会在target目录生成一个可执行的jar包如blog-backend-0.0.1-SNAPSHOT.jar。前端构建在blog-frontend目录下执行npm run build会在dist目录生成静态资源文件。部署方式传统部署将后端jar包上传到服务器用java -jar命令运行。将前端dist目录下的文件放到Nginx或Apache的静态资源目录并配置反向代理将API请求转发到后端服务。Docker部署将前后端都制作成Docker镜像通过docker-compose统一管理实现快速部署和水平扩展。这个SpringBootVue3的博客管理系统项目为你提供了一个绝佳的、可运行的现代Web开发范本。它不仅帮你串联起了前后端分离开发的全流程其清晰的代码结构和主流的技术栈更是你深入学习和个性化改造的完美起点。建议你在成功运行的基础上选择一两个感兴趣的功能点进行改造这个过程将是你技术能力提升最快的方式。