企业官网建设流程全解析

Spring Boot 和 Vue 的组合，几乎是当前后端开发和前端开发对接时最常见的搭档。但很多初学者在第一次接触这套组合时，经常会卡在同一个地方：代码其实不难，难的是把 JDK、Maven、Node.js、Vue CLI、数据库这些环境全部配好。网上资料很多，但要么版本太旧，要么只讲某一段，跟着走很容易半路卡住。

这篇文章就围绕“从零安装 Spring Boot + Vue 开发环境”这个目标，完整走一遍环境安装、项目初始化、前后端联调、常见报错排查的流程。即使你是第一次接触 Spring Boot 和 Vue，只要按文章顺序操作，最后也能把自己的项目跑起来。

文章会覆盖以下几块内容：

• Spring Boot 后端环境的安装与配置。
• Vue 前端环境的安装与配置。
• 使用 IDEA 创建 Spring Boot 项目。
• 使用 Vue CLI 创建前端项目。
• 前后端接口联调实战。
• 首次启动时高频报错的排查方案。
• 工程化开发的一些基础建议。

需要提前说明的是：不同操作系统的安装步骤会有些差异，文章以 Windows 系统为主演示，macOS 和 Linux 的安装思路完全一致，只有安装包格式和环境变量配置方式不同。

1. 背景与核心概念

在动手安装之前，先把 Spring Boot 和 Vue 分别是什么、为什么它们能组合在一起搞清楚。理解了概念，后面遇到问题才不至于完全懵。

1.1 Spring Boot 是什么

Spring Boot 是 Spring 家族中的一个轻量级框架，它的核心目标是简化 Spring 应用的搭建和开发。过去用 Spring 开发一个 Web 项目，需要手写大量 XML 配置，还要自己处理 Tomcat 启动、依赖版本兼容等问题。Spring Boot 通过“约定大于配置”的设计，把这些重复工作大量自动化了。

简单理解：Spring Boot 就是一个帮你把 Spring 项目“自动配置好”的工具。你只需要引入相关依赖，它就会根据依赖自动配置数据源、Web 容器、序列化等组件。比如引入 spring-boot-starter-web，Spring Boot 会自动内置 Tomcat，你的代码里写一个 Controller，项目启动后就能直接通过 HTTP 访问。

Spring Boot 在项目中的角色通常是一个“后端服务”，提供 API 接口给前端调用。它负责处理业务逻辑、操作数据库、返回 JSON 数据等。

1.2 Vue 是什么

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。和传统网页开发中“用 JS 操作 DOM”的方式不同，Vue 采用组件化开发模式，把页面拆分成一个一个的组件，通过响应式数据机制自动更新页面。

所谓“渐进式”，意味着你可以只在一个页面里局部使用 Vue，也可以结合 Vue Router、Vuex/Pinia 等生态构建完整的单页应用。

在前后端分离的架构中，Vue 主要承担前端页面的渲染工作。它通过 HTTP 请求调用后端提供的 API，拿到 JSON 数据后在浏览器中展示。用户看到的是 Vue 组件渲染出来的界面，用户交互产生的数据又通过 API 返回给后端处理。

1.3 为什么要用前后端分离架构

传统 Web 开发中，前端页面和后端逻辑经常耦合在一起，比如用 Thymeleaf、JSP 在服务端拼接 HTML。这种模式在开发小项目时效率高，但项目变复杂后，前后端开发会相互阻塞，前端改一个样式可能需要重新部署整个应用。

前后端分离架构则把两者分开：

• 后端专注于提供 API 接口。
• 前端专注于页面展示和用户交互。
• 双方通过 JSON 数据通信。
• 前后端可以并行开发、独立部署。

这也是为什么 Spring Boot + Vue 能成为热门组合的原因：Spring Boot 负责稳定可靠的后端服务，Vue 负责灵活高效的前端页面，两者通过 RESTful API 对接，分工明确。

2. 环境准备与版本说明

安装环境是本文最核心的部分。这里先列出需要安装的内容，再逐个讲解安装步骤和注意事项。

2.1 需要安装的软件清单

要跑通 Spring Boot + Vue，至少需要安装以下软件：

2.2 版本选择建议

版本问题是初学者最容易栽坑的地方。很多报错都是因为 JDK 版本、Spring Boot 版本、Node 版本互相不兼容导致的。

本文以一套常见的稳定组合为例进行演示：

这里要特别说明：Spring Boot 3.x 要求 JDK 17 及以上，如果你电脑安装的是 JDK 8，那 Spring Boot 只能选择 2.7.x。这是很多人启动项目失败的原因。如果你准备学习新技术，建议直接安装 JDK 17 搭配 Spring Boot 3.x；如果你需要维护旧项目，就保留 JDK 8。版本需要根据你的项目实际情况调整，本文示例以常见环境为例，重点演示配置思路。

3. Spring Boot 后端环境安装

先搭建后端环境。后端环境的依赖关系是：Spring Boot 项目是 Java 项目，所以必须先有 JDK；Maven 用来下载和管理第三方依赖。

3.1 安装 JDK

访问 Oracle 官网或 OpenJDK 官网下载 JDK。国内网络环境下，也可以使用华为云、阿里云等镜像站下载，速度会快很多。

下载完成后，双击安装包，一路下一步即可。安装路径可以选择默认路径，也可以自定义，比如D:\Java\jdk-17。这里有一个关键点：JDK 8 和 JDK 17 的安装目录结构不同，后面配置 JAVA_HOME 时要根据实际安装路径填写。

安装完成后，需要配置环境变量。在 Windows 搜索“环境变量”，打开后新建系统变量：

变量名：JAVA_HOME变量值：你的 JDK 安装路径，例如C:\Program Files\Java\jdk-17

然后在Path变量中新增：%JAVA_HOME%\bin

验证是否安装成功：打开命令行工具 CMD，输入java -version。如果出现类似java version "17"的输出，说明 JDK 安装成功。

C:\Users\Administrator>java -version java version "17.0.2" 2022-01-18 LTS Java(TM) SE Runtime Environment (build 17.0.2+8-LTS-86) Java HotSpot(TM) 64-Bit Server VM (build 17.0.2+8-LTS-86, mixed mode, sharing)

3.2 安装 Maven

Maven 是 Java 项目的依赖管理和构建工具。虽然 IDEA 自带 Maven，但建议单独安装一个，这样命令行操作也更方便。

下载 Maven 二进制包（apache-maven-3.x.x-bin.zip），解压到本地目录，比如D:\Maven\apache-maven-3.9.9。

同样配置环境变量：

变量名：MAVEN_HOME变量值：Maven 解压路径，例如D:\Maven\apache-maven-3.9.9

在Path中新增：%MAVEN_HOME%\bin

验证命令：

mvn -v

能输出版本号表示安装成功。

Maven 默认从中央仓库下载依赖，国内访问速度较慢。建议修改 Maven 的conf/settings.xml，配置阿里云镜像：

<!-- 文件路径：apache-maven-3.9.9/conf/settings.xml --> <mirror> <id>aliyunmaven</id> <mirrorOf>central</mirrorOf> <name>阿里云公共仓库</name> <url>https://maven.aliyun.com/repository/central</url> </mirror>

3.3 安装 IDEA

IDEA 是 JetBrains 出品的 Java IDE，社区版免费，旗舰版支持 Spring Boot 项目创建等高级功能。对于学习阶段，社区版配合手工创建项目也完全够用。安装时直接下载对应系统的安装包，无脑下一步即可。

4. Vue 前端环境安装

前端环境的依赖关系是：Vue 项目本质上是 JavaScript 项目，所以先装 Node.js；npm 是 Node.js 自带的包管理工具，再用 npm 安装 Vue CLI。

4.1 安装 Node.js

Node.js 官网提供 LTS（长期支持）版本下载。LTS 版本稳定性更好，适合开发环境，建议下载 LTS 版本。

安装时一路下一步，安装完成后验证：

node -v npm -v

如果输出版本号，说明 Node.js 和 npm 都安装成功。npm 是随 Node.js 一起安装的，不需要单独配置。

同样地，npm 默认源是国外地址，在国内下载依赖经常卡顿。建议切换为淘宝镜像：

npm config set registry https://registry.npmmirror.com

验证是否切换成功：

npm config get registry

如果输出https://registry.npmmirror.com，说明镜像配置成功。

4.2 安装 Vue CLI

npm 准备就绪后，全局安装 Vue CLI 脚手架工具：

npm install -g @vue/cli

安装完成后验证：

vue --version

默认输出类似@vue/cli 5.0.8的版本号。

这里解释一下 Vue CLI 的作用：平时开发 Vue 项目不会从零手写 Webpack 配置，那太复杂了。Vue CLI 帮我们封装好了项目模板，一条命令就能生成一个带构建、热更新、开发服务器等能力的标准 Vue 项目。后期如果使用 Vite 构建工具，也可以选择npm create vue@latest方式创建项目，思路类似，本文先以 Vue CLI 为例演示。

4.3 安装 VSCode 或 WebStorm

前端开发推荐使用 VSCode，安装几个常用插件可以显著提升效率：

• Vetur 或 Volar：Vue 语法高亮与智能提示。
• ESLint：代码规范检查。
• Prettier：代码格式化。

WebStorm 是 JetBrains 家的前端 IDE，功能更强大，但需要付费。初学者用 VSCode 就够了。

5. 创建 Spring Boot 后端项目

环境安装完成后，开始创建项目。这个阶段的目标是先把一个最简单的 Spring Boot 项目跑起来，能看到启动日志输出，说明后端环境完全没问题。

5.1 使用 IDEA 创建项目

打开 IDEA，选择New Project，在左侧选择Spring Initializr。如果列表里没有 Spring Initializr，可以在Settings -> Plugins中搜索并安装。

项目参数填写如下：

• Name：demo-backend
• Location：选择本地项目存储路径
• Language：Java
• Type：Maven
• Group：例如com.example
• Artifact：demo-backend
• Package name：自动生成，如com.example.demobackend
• JDK：选择已安装的版本

点击 Next 后，选择 Spring Boot 版本。这里要注意 JDK 版本的匹配关系：JDK 8 选择 Spring Boot 2.7.x，JDK 17 以上可以选择 Spring Boot 3.x。

依赖选择：

• Spring Web：提供 Web 开发能力，内置 Tomcat，是必须的。
• Spring Boot DevTools：热部署，开发时修改代码会自动重启，可选。

点击 Finish 后，IDEA 会开始下载项目依赖。第一次下载会比较慢，特别是没有配置 Maven 镜像的情况下。

5.2 查看项目结构

项目创建完成后的结构如下：

demo-backend/ ├── src/ │ ├── main/ │ │ ├── java/com/example/demobackend/ │ │ │ ├── DemoBackendApplication.java │ │ └── resources/ │ │ └── application.properties │ └── test/java/ └── pom.xml

DemoBackendApplication.java是整个项目的入口类，它自带main方法，运行它就能启动 Spring Boot 应用。

先把application.properties里面的默认端口配好，避免后面和 Vue 的开发服务器端口冲突：

# 文件路径：src/main/resources/application.properties server.port=8080

5.3 编写一个测试接口

为了验证后端环境是否安装成功，也为了后面前后端联调做准备，这里先编写一个简单的 Controller。

新建类HelloController.java：

// 文件路径：src/main/java/com/example/demobackend/HelloController.java package com.example.demobackend; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/api") public class HelloController { @GetMapping("/hello") public Map<String, Object> hello() { Map<String, Object> result = new HashMap<>(); result.put("code", 200); result.put("message", "success"); result.put("data", "Hello from Spring Boot!"); return result; } }

这里简单解释一下几个注解：

• @RestController：表示这个类是一个返回 JSON 数据的控制器，方法返回值会直接作为 HTTP 响应体返回，而不是渲染视图。
• @RequestMapping("/api")：定义该控制器下所有接口的公共路径前缀。
• @GetMapping("/hello")：声明一个 GET 请求接口，完整路径是/api/hello。

5.4 启动验证

运行DemoBackendApplication.java的main方法，控制台出现类似下面的日志，表示启动成功：

Tomcat started on port(s): 8080 (http) with context path '' Started DemoBackendApplication in 2.513 seconds (process running for 2.623)

此时打开浏览器，访问http://localhost:8080/api/hello，页面会返回 JSON 数据：

{ "code": 200, "message": "success", "data": "Hello from Spring Boot!" }

后端环境到这里就完全跑通了。

6. 创建 Vue 前端项目

后端有了，下面创建 Vue 前端项目。目标同样是先把默认项目跑起来。

6.1 使用 Vue CLI 创建项目

打开命令行工具，切换到你想存放项目的目录，执行：

vue create demo-frontend

命令执行后会出现交互式选项。选择 Vue 版本时，建议选择 Vue 3 对应的预设。如果你接触过 Vue 2，也可以选择 Vue 2，本文主要以 Vue 3 为例，但核心演示代码在 Vue 2 中同样适用。

创建过程中会询问是否安装 Router、Vuex、ESLint 等，初学者可以先全部选 No，保持项目最小化，减少变量。创建成功后，进入项目目录并启动：

cd demo-frontend npm run serve

6.2 查看项目结构

Vue CLI 创建的标准项目结构：

demo-frontend/ ├── node_modules/ ├── public/ │ └── index.html ├── src/ │ ├── App.vue │ ├── main.js │ ├── router/ │ └── components/ ├── package.json └── vue.config.js

其中package.json记录了项目依赖和脚本命令，npm run serve就是读取这个文件执行开发服务器命令。

6.3 访问默认页面

启动成功后，命令行会输出一个本地访问地址，默认是http://localhost:8081/。如果 8081 端口被占用，Vue CLI 会自动尝试下一个端口。

这里注意：Vue CLI 默认的启动端口是 8080，而 Spring Boot 也默认占用 8080。如果你先启动的是 Vue 开发服务器，它就占了 8080；再启动 Spring Boot 时，Spring Boot 会自动改到 8081，但日志里可能不太明显。为了避免这种混乱，文章开头就建议把 Spring Boot 端口固定为 8080。如果两个端口真冲突了，后面常见问题部分会讲具体怎么处理。

浏览器访问http://localhost:8081/，看到 Vue 官方欢迎页面，说明前端环境安装成功。

7. 前后端联调实战

环境单独跑通只是第一步。实际项目里，Vue 需要请求 Spring Boot 提供的接口，这才算真正把前后端串起来。联调过程中最常见的问题就是跨域。

7.1 为什么会出现跨域问题

浏览器有一个安全策略叫“同源策略”。所谓同源，指协议、域名、端口完全相同。当前端地址是http://localhost:8081，后端地址是http://localhost:8080，端口不同，所以两者属于“跨域”。

浏览器会拦截跨域请求的响应，所以即使后端接口能访问，前端也拿不到数据。解决跨域的方式有好几种，本文使用最常用的方案：Vue CLI 开发服务器代理。

7.2 配置 Vue 代理解决跨域

开发环境下，让 Vue 开发服务器（运行在 8081）把特定请求转发到后端服务器（运行在 8080）。因为这次请求是服务器之间的通信，不存在浏览器跨域拦截问题，相当于“前端请求自己的服务器，由服务器去请求后端”。

首先安装 axios，这是前端最常用的 HTTP 请求库：

npm install axios

在项目根目录下新建或修改vue.config.js：

// 文件路径：demo-frontend/vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })

配置说明：

• /api：匹配以/api开头的请求。
• target：代理目标地址，也就是 Spring Boot 接口地址。
• changeOrigin：让代理服务器在转发请求时修改请求头中的 Host，模拟同源请求。

修改src/main.js，注册一个简单的 axios 实例：

// 文件路径：demo-frontend/src/main.js import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' const app = createApp(App) // 设置 axios 默认请求前缀 axios.defaults.baseURL = '/api' app.config.globalProperties.$axios = axios app.mount('#app')

然后在App.vue中编写一个请求后端接口的方法：

<!-- 文件路径：demo-frontend/src/App.vue --> <template> <div class="container"> <h2>Spring Boot + Vue 联调测试</h2> <button @click="fetchHello">点击请求后端接口</button> <p v-if="message">{{ message }}</p> </div> </template> <script> export default { name: 'App', data() { return { message: '' } }, methods: { async fetchHello() { const res = await this.$axios.get('/hello') this.message = res.data.message + ' => ' + res.data.data } } } </script> <style> .container { text-align: center; margin-top: 100px; } button { padding: 10px 20px; cursor: pointer; } </style>

7.3 运行完整项目

先启动后端项目（Spring Boot），再启动前端项目：

# 后端项目在 IDEA 中运行 DemoBackendApplication # 前端项目在命令行运行 cd demo-frontend npm run serve

访问http://localhost:8081/，点击页面上的按钮，页面会显示后端返回的数据。到这里，Spring Boot + Vue 的开发环境已经完整跑通，前端成功调用了后端的接口。

7.4 页面展示效果

点击按钮后，前端页面显示：

success => Hello from Spring Boot!

说明请求链路完整工作：

• 浏览器发起请求到http://localhost:8081/api/hello。
• Vue 代理服务器拦截该请求，转发到http://localhost:8080/api/hello。
• Spring Boot 处理请求并返回 JSON。
• Vue 接收到响应，渲染到页面上。

8. 首次跑不起来的高频问题排查

即使按步骤操作，很多读者还是会遇到各种报错。整理了初学者最容易踩的几个坑，按排查顺序列出。

再补充一个端口排查的完整思路。如果在 Windows 下怀疑 8080 端口被占用，执行：

netstat -ano | findstr 8080

输出中的最后一列是占用该端口的进程 PID，然后执行：

taskkill /PID PID编号 /F

强制结束该进程后，端口就会释放。当然，如果你占用 8080 的是重要服务，不建议直接杀进程，改端口更稳妥。在实际项目里，应该先确认进程是什么，再决定是否结束。

9. 最佳实践与工程建议

环境跑通之后，你的本机已经具备 Spring Boot + Vue 的基础开发能力。但要支撑后续真实项目开发，还有几个习惯建议养成。

9.1 使用统一版本管理工具

如果团队中有多个 Java 项目和前端项目，建议在项目刚创建时就固定版本。后端可以用 Maven 的dependencyManagement或 Spring Boot 的 BOM 管理依赖版本；前端直接在package.json里锁定依赖版本，不要随意npm install xxx覆盖掉已有依赖。

在 pom.xml 中，Spring Boot 项目会自动继承父工程，默认各依赖版本已经经过兼容性测试。不要轻易手动修改 Spring Boot 依赖版本，除非你明确知道自己在做什么：

<!-- 文件路径：pom.xml，核心片段 --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.18</version> <relativePath/> </parent>

这里的2.7.18是 Spring Boot 官方维护的稳定版本，具体使用哪个版本，以你创建项目时选择的版本为准。

9.2 配置分离与多环境支持

开发环境、测试环境、生产环境的数据库地址、端口、日志级别通常不同。不要把配置写死在代码里。

Spring Boot 原生支持多环境配置，创建application-dev.properties和application-prod.properties，在application.properties中切换：

# 文件路径：src/main/resources/application.properties spring.profiles.active=dev

前端同理，可以在项目根目录分别创建.env.development和.env.production文件，写入不同的 API 地址变量。开发环境用/api走代理，生产环境用完整的后端域名地址。

9.3 前后端并行开发与接口约定

前后端分离后，最大的风险就是接口不一致。建议在项目开始阶段就明确接口规范，至少包含请求路径、请求方法、请求参数、响应格式四要素。后端先把接口文档或 Mock 数据提供出来，前端就可以同步开发页面，不需要等后端代码写完。

如果后端接口还没完成，前端可以用 Mock.js 模拟数据；后端接口完成后再切换为真实请求。这样两边能真正并行推进，而不是前端等后端，后端等前端。这一步和后面要学习的接口测试、Mock 紧密相关，是前后端分离开发的重要能力。

9.4 开发时善用热部署和热更新

Spring Boot DevTools 依赖可以实现后端代码修改后的自动重启，省去手动重启的时间。Vue 开发服务器本身自带热更新，修改前端代码后浏览器页面会自动刷新。

热部署能提升开发效率，但要特别注意：它只适合开发环境，生产环境不推荐开启。生产环境应以编译后的 jar 包和前端 dist 静态资源为准。

9.5 数据库环境使用本地化独立实例

如果项目需要操作数据库，建议在本地安装一个独立的 MySQL 实例，而不是直接连公司测试环境的数据库。本地开发避免影响他人数据，也可以随时重置库表结构。

连接数据库时，在application-dev.properties中配置本机的连接信息：

# 文件路径：src/main/resources/application-dev.properties spring.datasource.url=jdbc:mysql://localhost:3306/demo_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=你的密码 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

数据库相关的账号密码只放在本地配置里，不要提交到 Git 仓库。生产环境通过环境变量注入，这是最基本的配置安全管理要求。

9.6 培养日志排查能力

很多初学者项目跑不起来时，第一反应是百度报错信息，而忽略了控制台日志本身。实际上，绝大多数错误原因都在启动日志和浏览器控制台里。

后端环境看 IDEA 的 console 输出，前端环境看运行npm run serve的终端窗口和浏览器开发者工具的 Network、Console 面板。排查时先看最底部的异常信息，再看出现异常的代码行。即使最后还需要搜索，带着更精确的错误描述去查，效率也会高很多。

10. 总结与学习路线

现在你已经完成了 Spring Boot + Vue 开发环境的搭建，并且通过一个最简单的接口请求案例，把前后端完整串起来了。回顾整个流程，核心掌握了以下内容：

• JDK、Maven、Node.js、Vue CLI 的安装与环境变量配置。
• IDEA 中 Spring Boot 项目的创建方式。
• Vue CLI 前端项目的创建与启动。
• Spring Boot 通过@RestController对外提供 JSON 接口。
• Vue 通过 axios 请求后端接口。
• 代理解决跨域问题的原理与配置。
• 常见环境报错的排查思路。

这套环境是所有 Spring Boot + Vue 项目的地基。接下来可以按以下方向继续深入：

• 后端：学习 Spring Boot 操作数据库，集成 MyBatis 或 Spring Data JPA，理解 Controller、Service、Mapper 三层架构。
• 前端：学习组件通信、Vue Router 路由、Pinia 状态管理，理解单页应用的数据流转方式。
• 联调：学习 RESTful API 设计规范、接口鉴权（如 JWT）、统一响应封装。
• 部署：学习把后端打成 jar 包、前端构建成 dist 目录，最终部署到服务器。

第一次搭环境确实容易焦虑，但只要你按照“先跑通再看细节”的思路，先让项目转起来，再去深挖每个配置的作用，后面学起来会顺很多。建议你动手实践一遍，把两边的 HelloWorld 项目都成功启动，再尝试让页面显示后端返回的数据。环境通了，后面的路就好走了。