1. 整体思路先理清这条技术栈到底需要什么做 Java SpringBoot Vue 的全栈开发不管你是刚入行、准备实习还是公司换新电脑要重新搭环境第一个容易翻车的地方不是写代码而是“环境装到一半不知道该干什么了”。我见过太多人卡在 JDK 装完不知道下一步装什么、SpringBoot 项目创建出来跑不起来、Vue 依赖装到一半 node_modules 把磁盘挤爆这些破事上。所以这篇合集我就直接把一套完整、能落地、可复现的开发环境配置流程按顺序拆开讲清楚。先说结论一套能干活的前后端分离开发环境核心就四件事JDK Maven IDEA后端工具链、Node.js npm/yarn 前端脚手架Vue 工具链、MySQL/Redis 这类中间件按需装、以及版本之间的互相兼容。这四件事顺序不能乱版本不能随便选配的时候更不能“差不多就行”。这套配置适合谁适合三类人第一类是刚接触 Java 全栈、照着教程敲代码但总是报环境错误的初学者第二类是要在新电脑上从零搭建开发环境、不想一次次百度“环境变量怎么配”的普通开发者第三类是准备面试、需要快速把 SpringBoot Vue 项目跑起来做演示或复习的求职者。每一类人看完这篇合集都能少走很多弯路。这篇合集不是简单的“下一步下一步”安装向导而是把我自己配环境时踩过的坑、犯过的迷糊、后来总结出来的固定操作都写进去。比如 JDK 到底装哪个版本、Maven 的 settings.xml 怎么改才不会每次下载依赖都卡十分钟、SpringBoot 项目创建时 IDEA 默认选项怎么选才不会被高版本坑到、Vue 项目用 Vite 还是 Vue CLI、npm 镜像源不换会导致什么后果——这些细节网上一搜一大堆但很少有人按“一条完整链路”的顺序讲清楚。我按自己的实操经验写一篇能直接跟着做的合集。2. 版本选型和工具清单为什么这一步最不能偷懒2.1 版本兼容性才是环境配置的真正核心环境配置新手最容易犯的一个错误就是看到官网最新版就下载结果 SpringBoot 3.x 配 JDK 8项目起不来或者装了最新的 Node.js 20老项目用的 Vue CLI 2 直接不兼容。版本兼容性是配环境这件事里最容易被忽略、但影响最大的一个环节。以 2024 年、2025 年这个时间节点的稳定组合来说我个人推荐的搭配是JDKJDK 8 或 JDK 17二选一不建议用 JDK 9 到 16 的中间版本11 的话也可以但不是最省心Maven3.6.3 到 3.9.x之间都行不要用 3.5 以下的太老版本SpringBoot如果 JDK 8用 2.7.x如果 JDK 17用 3.x但 3.x 改动大很多老教程不适用Node.js16.x 或 18.x LTS长期支持版别用最新的非 LTSVue如果是新项目用 Vue 3 Vite如果是为了兼容旧项目才用 Vue 2 Vue CLI这套组合不是我拍脑袋定的每一环都有实际理由。JDK 8 到 JDK 17 之间隔了很多版本但企业里大量老项目还是用 JDK 8JDK 17 是 Spring Boot 3.x 的硬性要求而且 17 这个 LTS 版本本身也很成熟。SpringBoot 2.7.x 是 2.x 最后一个稳定分支很多教程和第三方依赖比如一些老版的 mybatis-plus、activemq 整合在 2.7.x 上最不容易出幺蛾子。2.2 工具清单和获取渠道要提前确认除了开发工具本身你还需要确认自己的操作系统的情况。Windows、Mac、Linux 三套系统的配置路径和坑点不太一样这篇合集以 Windows 为主因为大多数新手用的都是 Windows但我会在关键地方提一句 Mac 和 Linux 的差异。必备工具清单如下工具用途推荐版本获取建议JDKJava 编译和运行环境8 或 17官网或华为云/阿里云镜像Maven依赖管理和项目构建3.6.3官网 apache 下载IntelliJ IDEAJava 集成开发环境2023.x 或 2024.x官网 Community/UltimateNode.js前端运行环境16.x/18.x LTSnodejs 中文网或官网前端脚手架创建 Vue 项目Vite 4/create-vuenpm 安装Git代码版本管理最新稳定版官网MySQL数据库按需8.0官网Redis缓存按需7.x官网或 Windows 移植版提示所有工具都建议直接从官方渠道或国内可信镜像下载不要用第三方打包的“绿色版”“破解版”。环境工具这种东西装一次用很久装一个带后门或者有问题的版本后续排查问题会非常痛苦。3. JDK 与 Maven 配置后端地基具体怎么打3.1 JDK 安装与环境变量的标准化配置JDK 的安装本身不难但环境变量的配置是新手第一个劝退点。装完 JDK 后系统并不知道“java”这个命令去哪找你需要告诉操作系统三件事JDK 装在哪JAVA_HOME、系统去哪里找可执行文件PATH、以及一些 Java 原生库去哪找CLASS_PATH其实现在不配也能用但配上更稳。具体的操作步骤我以 JDK 17 为例JDK 8 的操作逻辑一样下载 JDK 17双击安装。安装路径建议不要带空格、不要带中文比如D:\Java\jdk-17别装到C:\Program Files\Java这种路径下后面有些配置文件处理带空格的路径会出问题。打开系统环境变量设置右键“此电脑”-“属性”-“高级系统设置”-“环境变量”。在“系统变量”区域新建JAVA_HOME变量值填写D:\Java\jdk-17。找到Path变量点击编辑新建一行%JAVA_HOME%\bin。验证打开命令行WinR 输入 cmd输入java -version和javac -version看到版本号输出就说明配好了。这里有个小细节如果你电脑上之前装过别的 JDK 版本或者用过一些软件自带的 JRE配置完环境变量后怎么确认当前生效的是哪一个命令行里输入where java它会列出所有 java.exe 的位置从上到下的顺序就是系统搜索的优先级。如果发现第一个不是你想要的版本就去检查 Path 变量里是不是有别的 java 路径排在前面。注意在 Mac 或 Linux 上JDK 一般通过 Homebrew 或 apt 安装环境变量写在~/.zshrc或~/.bashrc里export JAVA_HOMExxxsource 一下就能生效。原理和 Windows 完全一样只是配置文件位置不同。3.2 Maven 安装和 settings.xml 的核心配置JDK 配好之后下一步是 Maven。Maven 的作用有两个管理项目依赖自动下载 jar 包和构建项目打包成可运行的程序。没有 Maven 的 Java 项目手动下载 jar 包再放到 lib 目录那种痛苦谁经历过谁知道。有了 Maven你在 pom.xml 里声明依赖它会自动去中央仓库下载。但是问题来了Maven 中央仓库在国外国内网络下载速度感人。所以配 Maven 的第一件大事就是改镜像仓库和本地仓库位置。安装 Maven 后在 Maven 的 conf 目录下找到settings.xml用文本编辑器打开重点改这几处!-- 本地仓库位置默认在 C 盘用户目录下的 .m2 文件夹建议换到其他盘 -- localRepositoryD:/maven-repository/localRepository !-- 镜像用阿里云镜像替代中央仓库 -- mirrors mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror /mirrors改完 settings.xml 后还有一个容易忽略的地方Maven 编译时使用的 JDK 版本。如果你用 JDK 17Maven 默认的编译级别可能还是老版本的 Java 5 或 8导致代码里用了新语法却编译不过。在 settings.xml 里加上这一段profiles profile idjdk-17/id activation activeByDefaulttrue/activeByDefault /activation properties maven.compiler.source17/maven.compiler.source maven.compiler.target17/maven.compiler.target maven.compiler.compilerVersion17/maven.compiler.compilerVersion /properties /profile /profiles配置好之后验证一下命令行输入mvn -v看输出里的 Java version 是否是你刚装的 JDK 版本。如果不是检查一下环境变量 M2_HOME 是否配置正确以及 PATH 里 mvn 的指向。3.3 IDEA 安装后的必要设置和新建项目前的准备IDEA 装好后不能急着新建项目有几个设置建议先改掉不然用起来各种别扭打开 SettingsCtrlAltS搜索 “Encoding”把 Global Encoding、Project Encoding、Properties Files 的编码都设为 UTF-8。Java 源码默认带中文注释编码不对直接乱码这在国内开发环境里是必须处理的。搜索 “Maven”把 Maven home path 指向你本地安装的 Maven 目录把 User settings file 指向你刚改好的 settings.xmlLocal repository 会自动读取。这里要特别注意IDEA 自带了一个 Maven但不是你刚才配置的那个如果不手动指定它会用默认的中央仓库下载依赖慢到怀疑人生。搜索 “Compiler”把 Build project automatically 勾上方便开发时热更新配合 JRebel 或 Devtools 更好用但不勾也不影响。如果你的电脑内存足够可以给 IDEA 分配更多内存。在 IDEA 安装目录 bin 下的 idea64.exe.vmoptions 里把 -Xmx 调大到 2048m 或 4096m项目多了、代码多了之后卡顿会明显减少。IDEA 配置好之后验证 Maven 集成是否生效新建或打开一个项目右侧的 Maven 窗口能看到项目的依赖列表初次导入时右下角会显示 “Resolving dependencies...”这个过程如果很快完成说明镜像配置生效了如果卡着不动或者报错大概率是 settings.xml 的镜没写对。4. SpringBoot 项目的创建和版本坑怎么避开4.1 三种创建 SpringBoot 项目的方式对比SpringBoot 项目的创建方式主要有三种IDEA 内置的 Spring Initializr、官网 start.spring.io、以及直接从一个现成项目复制改。三者的选择取决于你的网络状况和项目复杂程度。第一种IDEA 内置 Spring Initializr。在 IDEA 里 File - New - Project 选择 Spring Initializr然后填写包名、项目名选依赖。这个方式的优点是全程图形化缺点是 Spring Initializr 的服务有时候在国内访问不稳定导致卡在下载初始化模板那一步。解决办法是在创建界面把 Server URL 从 https://start.spring.io 改成阿里云的镜像地址 https://start.aliyun.com。改完之后基本秒开。第二种官网 start.spring.io 直接下载。浏览器打开官网填好配置后下载一个 zip 包解压后用 IDEA 打开即可。如果官网打不开或下载慢也可以用阿里云的 start.aliyun.com 网页版。第三种复制现成项目改。从 Git 或同事那里拿到一个已经能跑的 SpringBoot 项目复制后改项目名、包名再根据需求增删依赖。这是老手最常用的方式因为 SpringBoot 项目的骨架其实都差不多没必要每次从头生成但新手不建议上来就复制容易搞不清项目结构。无论哪种方式创建核心的 pom.xml 里都需要有这些基础内容父依赖spring-boot-starter-parent、web 依赖spring-boot-starter-web、测试依赖spring-boot-starter-test以及你的业务相关依赖mybatis、mysql、redis 等。4.2 SpringBoot 版本太高导致的问题和解决方法热词里有一个特别扎心的词叫“springboot版本太高”这基本每个刚接触 SpringBoot 的人都会遇到。最典型的情况就是跟着视频或者博客教程敲代码教程用的是 SpringBoot 2.2你创建项目时默认选了最新的 3.x结果代码一样但启动直接报错。SpringBoot 版本带来的主要差异有几个第一javax 变 jakarta。SpringBoot 3.x 把 Java EE 的包名从 javax.* 换成了 jakarta.*。如果你在代码里 import javax.servlet.http.HttpServletRequest3.x 项目会直接编译错误要改成 jakarta.servlet.http.HttpServletRequest。这种问题在很多老教程里会出现因为教程代码都是按 2.x 写的。第二最低 JDK 版本要求变了。SpringBoot 3.x 要求 JDK 17 起步如果你用 JDK 8启动时会直接报 UnsupportedClassVersionError连编译都过不去。第三部分第三方 starter 没有适配 3.x。比如早期版本的 mybatis-plus、一些非官方 starter在 3.x 下跑不起来。解决思路有两种如果你只是学习、跟着教程做建议直接把 SpringBoot 钉在 2.7.xJDK 用 8 或 17 都可以这样教程里的代码基本不用改。如果你确实要用 3.x那么要接受 javax 到 jakarta 的迁移遇到编译错误时来一次全局替换即可IDEA 里 CtrlShiftR把 javax 换成 jakarta但要注意有些第三方库内部用的还是 javax这种情况下需要等依赖方适配。注意SpringBoot 版本的兼容性问题最好的排查方式是看 Maven 依赖树。遇到奇怪的编译错误或启动错误时在 pom.xml 目录下执行mvn dependency:tree先确认项目实际拉到的 SpringBoot 版本和第三方依赖版本再根据版本差异去搜问题基本都能找到答案。4.3 一个能“正常启动”的最小 SpringBoot 工程长什么样这里我给出一个经过验证的最小可运行工程结构方便你对照检查自己项目是不是少了什么demo ├── pom.xml └── src └── main ├── java │ └── com/example/demo │ ├── DemoApplication.java │ └── controller/HelloController.java └── resources └── application.ymlDemoApplication.java 的内容package com.example.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } }HelloController.java 的内容package com.example.demo.controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; RestController public class HelloController { GetMapping(/hello) public String hello() { return Hello SpringBoot; } }application.yml 的内容基础但不臃肿server: port: 8080 spring: application: name: demo这个工程跑起来后浏览器访问 http://localhost:8080/hello能看到 “Hello SpringBoot”就说明 SpringBoot 环境整个通了。如果启动失败看控制台第一行报错端口被占用就去改 server.portJava 版本不对就检查 IDEA 的 Project Structure 里 SDK 是不是选对了依赖没下全就用 Maven 窗口的 Reload All Projects 再刷一遍。5. Node.js 与 Vue 环境前端这边同样有讲究5.1 Node.js 安装与 npm 镜像源配置后端环境通了之后开始整前端。Vue 项目的开发环境依赖 Node.js这一点没得商量。Node.js 的安装其实很傻瓜化下载安装包一路下一步就行但有几个关键点需要注意第一版本选择。长期支持版LTS是首选。2024 年左右 Node 18 和 Node 20 都是 LTS但我自己的经验是 Node 16 和 Node 18 在兼容一堆老项目时最稳Node 20 之后有些老依赖会报 OpenSSL 相关的错误。如果你用 Vite Vue 3Node 18 完全够用。第二确认 npm 镜像源。npm 默认源是 https://registry.npmjs.org国内访问速度时快时慢装个稍大点的依赖动辄几分钟。这里需要换成国内镜像源推荐用 npmmirror原淘宝镜像npm config set registry https://registry.npmmirror.com换完之后可以用npm config get registry确认是否生效。第三全局安装目录。npm 全局安装的包默认放在 C 盘 AppData 下时间长了会占不少空间而且权限经常出问题。建议把全局安装目录改到非系统盘npm config set prefix D:\nodejs\node_global npm config set cache D:\nodejs\node_cache改完之后记得把D:\nodejs\node_global加入系统的 Path 环境变量否则全局安装的命令行工具找不到。5.2 用 Vite 创建 Vue 3 项目和依赖安装的重点现在创建 Vue 3 新项目官方推荐的方式是用 Vite不是旧的 Vue CLI 了。Vite 的启动速度快、热更新快几乎可以说是现代前端开发的标配。创建项目的命令npm create vuelatest执行后它会问你项目名、是否用 TypeScript、是否用 JSX、是否安装路由和 Pinia 等。按需选择即可。如果是新手建议第一遍先全部选 No用最简模板把流程跑通之后再加路由和状态管理。创建完成后进入项目目录cd my-vue-app npm install npm run devnpm install这一步是重头戏依赖多的时候耗时可能非常长。如果前面没换镜像源这一步会非常煎熬如果换了镜像源还是慢可以尝试用 pnpm 代替 npm前提是你有全局 pnpm下载速度会快很多npm install -g pnpm pnpm installnpm run dev跑起来后终端会输出本地访问地址浏览器打开看到 Vue 初始页面就说明前端环境通了。5.3 Vue 依赖安装失败和高版本 Node 兼容问题的排查Vue 依赖安装失败的场景太多了我举几个最常见的场景一node-sass 安装失败。这是前端老项目里最让人头疼的问题之一。node-sass 是 C 模块需要在安装时下载二进制文件编译和 Node 版本强相关。Node 版本一高node-sass 就匹配不上直接报错。解决办法有两个优先尝试一是换用 dart-sass也就是 sass 包两者的 API 大部分兼容二是如果必须用 node-sass去查它的版本和 Node 版本对应表或者用环境变量让它从镜像下载二进制。但说实话2024 年还不升级到 dart-sass 的项目我建议你换项目吧——语义上省下来的时间不如重建一个。场景二npm ERR! ERESOLVE unable to resolve dependency tree。这个报错多发生在依赖版本冲突时。最粗暴的解决办法是加--legacy-peer-deps参数绕过节版本检查npm install --legacy-peer-deps这个命令能解决绝大多数“看起来是依赖冲突但实际上能用”的问题。场景三Node 版本过高导致 OpenSSL 报错。一些旧项目尤其是用 webpack 4 的在 Node 17 以上跑不起来报错类似error:0308010C:digital envelope routines::unsupported。原因是最新 OpenSSL 改了默认算法webpack 4 用的还是旧的。解决办法有三个升级 webpack 到 5推荐但工作量可能不小、或者在启动命令里加NODE_OPTIONS--openssl-legacy-providerset NODE_OPTIONS--openssl-legacy-provider npm run serveWindows 下用 setMac/Linux 下用 export。但这个方法只是绕过去不是真正解决。我的建议是新项目直接用 Vite Vue 3彻底避开这个坑。5.4 Vue 播放 m3u8 视频流的常见配置方式热词里有个“vue播放m3u8”这是视频类项目常见的需求。m3u8 是 HLS 流媒体协议使用的播放列表格式浏览器原生不支持直接播放需要借助 video.js 搭配 hls.js 或者 plyr 等库来实现。这里给出一个基于 video.js 的 Vue 3 配置示例比较通用适合大多数需要播放 m3u8 的 Vue 项目先装依赖npm install video.js然后在组件里这样用template video refvideoPlayer classvideo-js vjs-default-skin controls preloadauto width800 height450 /video /template script setup import { onMounted, ref } from vue import videojs from video.js import video.js/dist/video-js.css const videoPlayer ref(null) onMounted(() { const player videojs(videoPlayer.value, { autoplay: false, controls: true, sources: [{ src: https://your-server.com/path/to/playlist.m3u8, type: application/x-mpegURL }] }) }) /script这个配置的核心就是type: application/x-mpegURLvideo.js 内部会自动加载 hls.js 来解析 m3u8。要注意的是播放地址必须允许跨域访问否则控制台会报 CORS 错误。如果是本地测试可以用 Vite 的 proxy 做代理或者在后端加跨域配置。5.5 打包后布局异常和路由失效的排查思路“vue 打包后布局异常”是热词里的另一个高频问题。开发环境一切正常npm run build后部署到服务器发现打开页面样式全乱或者图片、JS 文件 404路由刷新后直接白屏。这基本可以分成两类来排查。一类是静态资源路径不对。开发环境下的资源路径是相对路径还是绝对路径取决于 Vite 的配置默认情况下 Vite 打包产物中资源引用使用的是/assets/xxx.js这种绝对路径如果你的项目部署在域名子路径下比如 https://xxx.com/vue-project/这就会 404。解决办法是在 vite.config.js 里设置 baseexport default defineConfig({ base: ./, // 或 /vue-project/ // ...其他配置 })改成./后资源引用变成相对路径放在任意子目录下都能正常加载。另一类是路由模式导致的刷新白屏。Vue Router 默认用的是 createWebHistory 模式history 模式这种模式依赖服务端配置刷新时服务器找不到对应的路由路径就返回 404 或白屏。解决办法有两个一是后端做 try_files 配置Nginx 里配try_files $uri $uri/ /index.html;二是改路由为 hash 模式import { createRouter, createWebHashHistory } from vue-router const router createRouter({ history: createWebHashHistory(), routes })hash 模式 URL 里会多个 # 号不算好看但完全不需要服务端配合。新手第一次部署项目时用 hash 模式是最省心的。6. 中间件与常用辅助环境按需安装别贪多6.1 MySQL 和 Redis 的本地安装要点做实际项目基本离不开数据库和缓存本地开发环境里 MySQL 和 Redis 是绕不开的两件套。MySQL 的安装我建议直接用 MySQL Installer 装 8.0 版本安装时选 Developer Default 或者只选 MySQL Server把端口保持默认 3306字符集选 utf8mb4。装完 MySQL 后要记得做两件事一是设置 root 密码别设太复杂的本地开发用 root/root 或 root/123456 都行但生产环境绝对不能这样二是确认服务有没有启动Windows 上能在服务管理里看到 MySQL80 这个服务。然后连接测试命令行试一下mysql -uroot -p能看到 mysql 提示符就说明数据库环境OK。Redis 在 Windows 上稍微麻烦一点官方不支持 Windows需要去 GitHub 找 tporadowski/redis 这个社区维护的 Windows 移植版或者用 Memurai 替代。下载解压后直接运行 redis-server.exe 就能启动服务再开一个命令行窗口运行 redis-cli.exe能连上就说明装好了。如果要在 SpringBoot 项目里用 Redis还需要确认 application.yml 里的 Redis 地址和端口默认 localhost:6379能连上连不上先检查 Redis 服务有没有启动。6.2 一些常被问到的扩展Hadoop、OnlyOffice、ActiveMQ 这些知识点热词里还出现了一些比较特殊的词比如“hadoop安装与伪分布式集群搭建”“springboot 整合 activemq”“springboot 集成 onlyoffice”。这些虽然不属于标准的前后端开发环境但如果你未来要做大数据方向或者做办公系统集成可能用得上。我简单提一下定位和注意点Hadoop 伪分布式集群这个一般是大学课程或大数据入门教程里的任务环境配置的关键在于 core-site.xml、hdfs-site.xml、yarn-site.xml 几个配置文件的编写以及免密 SSH 登录的配置。它是独立于 Java Web 开发环境的另一套东西JDK 版本首选 8Hadoop 版本 2.x 或 3.x 都行但要确保和本机 JDK 兼容。SpringBoot 整合 ActiveMQActiveMQ 是消息队列中间件整合的核心是引入 spring-boot-starter-activemq 依赖然后在 application.yml 配置 broker-url默认 tcp://localhost:61616再用 JmsTemplate 发消息、JmsListener 收消息。要注意 ActiveMQ 5.x 和 6.x 的依赖包名有些变化如果是新项目建议直接整合 ActiveMQ Classic 的 5.x 版本资料多、坑少。SpringBoot 集成 OnlyOfficeOnlyOffice 是一个在线文档编辑服务可以嵌到自己的系统里实现在线预览、编辑 Word/Excel/PPT。集成方式比较简单部署好 OnlyOffice Document Server 后在自己的 SpringBoot 项目里返回一个配置好的 URL前端用 OnlyOffice 提供的 JS API 进行嵌入式加载。它的核心是 URL 签名和安全校验这部分需要看官方文档按你自己的系统约定做。这些扩展内容我点到为止因为它们属于“遇到再学”的类型不是环境配置的主干链路。但每条我都给一个关键词方向方便你在真遇到的时候知道去搜什么。7. 前后端联调接口环境产生的所有问题都在这里7.1 跨域问题用代理而不是硬跨前后端分离开发中Vue 开发服务器跑在 5173Vite 默认或 8080Vue CLI 默认端口SpringBoot 后端跑在 8080 端口或自定义端口两个服务地址不同浏览器直接 fetch 后端接口必然触发跨域。最简单的处理方式不是在后端写 CrossOrigin 或者配置 CORS 过滤器而是让前端开发服务器做一个代理。以 Vite 为例// vite.config.js export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })这样后端接口比如 http://localhost:8080/user/list前端代码就请求 /api/user/listVite 开发服务器会自动把它转发到后端。这个方式的好处是代码里不用写绝对地址联调时完全感觉不到跨域的存在部署时再用 Nginx 做同样的事即可。如果你确实需要在后端解决跨域SpringBoot 里的一个简单配置是这样Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true); } }但我自己的习惯是尽量不靠后端硬跨因为生产环境很少有人会把跨域完全放开前端代理的方式跟生产环境的行为更接近切换环境时只需要改代理配置。7.2 端口占用和启动失败的实战排查联调过程中最烦的运行时问题就是“端口被占用”。SpringBoot 启动报错大概是这样的Web server failed to start. Port 8080 was already in use.这时候不要慌先找到谁占了端口。Windows 下用这个组合命令netstat -ano | findstr 8080 tasklist | findstr 对应PID查到占用进程后如果确实是僵尸进程可以结束它taskkill /F /PID 对应PID如果是另一个正经服务在用这个端口那你就改 SpringBoot 的配置文件server: port: 8081Vue 项目的端口占用也类似Vite 启动时如果端口被占会自动尝试下一个端口所以一般不会报错只是会跑到 5174 或者 5175 去注意看终端的提示就行。7.3 Nginx 部署后端和前端产物的简单思路前后端开发和联调没问题了要部署到测试环境或正式环境最常用的组合是 Nginx 托管前端打包产物 SpringBoot 打包 jar 后台启动。SpringBoot 打包的命令mvn clean package打包完成后 target 目录下会生成一个 demo-0.0.1-SNAPSHOT.jar 文件上传到服务器后执行java -jar demo-0.0.1-SNAPSHOT.jar如果想后台运行用 nohup 或者直接做成 systemd 服务。Vue 前端的打包产物则是在项目目录下执行npm run build生成到 dist 目录把 dist 里的文件丢到 Nginx 的 html 目录下即可。一个最简的 Nginx 配置示例server { listen 80; server_name your-domain.com; # 前端静态资源 root /var/www/vue-project; index index.html; # 处理 history 模式路由刷新问题 location /api/ { proxy_pass http://127.0.0.1:8080/api/; } location / { try_files $uri $uri/ /index.html; } }这个配置同时解决了两个问题前端资源正常加载 接口请求代理到后端。我自己第一次部署前后端分离项目时就是在这两件事上花了挺长时间配好一次后后面就通了。8. 技巧汇总环境配置这件事值不值得一直优化最后聊一点个人体会。这些年我给不少新人看过环境问题也给自己换过好几台电脑重新搭过环境。慢慢我发现一个规律环境配置这件事看起来是体力活实际上拼的是系统性和记录习惯。系统性就是你得清楚整条链路是怎么串起来的。JDK 影响 MavenMaven 影响 IDEANode 影响前端脚手架前端脚手架的产物最终要部署到服务器——每一环都跟前后环有关。你脑子里有了这条链路遇到报错时就能判断是哪一环出了问题而不是瞎猜。配环境时按顺序来别跳步特别是在版本选择上别“捡到最新就用最新”。记录习惯就是你每次配完环境最好把自己用的版本、踩过的坑、改过哪些配置写成一篇笔记或 README。我自己就维护了一个环境配置仓库换电脑时直接照着执行一遍半小时搞定不需要重新踩一遍所有坑。也建议你把 IDA、Maven、npm、Git 这些工具的常用配置备份起来比如 settings.xml、.npmrc、.gitconfig这些文件都是越用越顺手的筹码。再分享几个我个人的固定做法JDK 和 Node 都装在 D 盘独立目录不碰默认路径方便以后多版本切换Maven 本地仓库单独用一块盘放C 盘空间紧张时不至于因为 .m2 目录爆炸IDEA 的配置和插件可以在 Settings 里导出新电脑一键恢复npm 全局包能少装就少装项目内依赖优先。这些习惯看起来不起眼实际用上一段时间就能明显感觉省心。环境配置不是写业务代码没有那么多“创造力”的空间更像是一套标准的仪式动作。动作做标准了后面写代码、调接口、部署上线都会顺畅很多。如果你配完环境跑通了第一个 SpringBoot 项目和第一个 Vue 项目那种“通了”的感觉其实挺有成就感的——后面所有踩坑的回忆都会变成你跟别人分享经验时的素材。