Java开发在VScode上配置并实现开发时前后端热更新

前言

之前一直使用的IDEA,但是当我们使用Cursor这类的AI编辑器的时候,我们也像直接运行Java项目,可以添加脚本来下载依赖和运行项目。

本次示例是前后端放在同一个项目下,前端也是需要编译的Vue项目。

配置Maven

设置Maven

1
IDEA_HOME\plugins\maven\lib\maven3

我这里是

1
D:\Program Files\JetBrains\IntelliJ IDEA 2024.1.1\plugins\maven\lib\maven3

添加环境变量

1
MAVEN_HOME=D:\Program Files\JetBrains\IntelliJ IDEA 2024.1.1\plugins\maven\lib\maven3

Path中添加

1
%MAVEN_HOME%\bin

测试

1
mvn -v

安装依赖

install.bat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
@echo off
setlocal

REM 为避免中文乱码,切换控制台为 UTF-8 编码
chcp 65001 >nul

REM 切换到当前脚本所在目录(项目根目录)
cd /d "%~dp0"

echo ==============================
echo 正在安装后端依赖(Maven)...
echo ==============================

REM 下载并预热 Maven 依赖(不启动应用)
call mvn -q -DskipTests dependency:go-offline
if errorlevel 1 (
echo.
echo 后端依赖安装失败,请检查是否已安装 Maven 并配置好 JAVA_HOME。
pause
exit /b 1
)

echo.
echo ==============================
echo 正在安装前端依赖(npm)...
echo ==============================

cd frontend
call npm install
if errorlevel 1 (
echo.
echo 前端依赖安装失败,请检查是否已安装 Node.js/npm。
pause
exit /b 1
)

cd ..

echo.
echo 所有前后端依赖安装完成。

endlocal

运行

run.bat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@echo off
setlocal

REM 为避免中文乱码,切换控制台为 UTF-8 编码
chcp 65001 >nul

REM 切换到当前脚本所在目录
cd /d "%~dp0"

echo ==============================
echo 正在构建前端(Vue3 + Vite)...
echo ==============================

cd frontend
call npm run build
if errorlevel 1 (
echo.
echo 前端构建失败,已终止执行。
pause
exit /b 1
)

cd ..

echo.
echo ==============================
echo 正在启动后端(Spring Boot)...
echo ==============================

call mvn spring-boot:run

endlocal

调试

开发的过程中我们需要前后端代码变更的时候都要热更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@echo off
setlocal

REM 为避免中文乱码,切换控制台为 UTF-8 编码
chcp 65001 >nul

REM 切换到当前脚本所在目录(项目根目录)
cd /d "%~dp0"

echo ==============================
echo 启动前端开发服务器(Vite 热更新)...
echo ==============================

cd frontend
start "xh-point-marker-frontend-dev" cmd /k "npm run dev"

cd ..

echo.
echo ==============================
echo 启动后端(Spring Boot 热重启:devtools)...
echo ==============================

start "xh-point-marker-backend-dev" cmd /k "mvn spring-boot:run"

echo.
echo 已启动前后端开发服务,代码变更将自动热更新

endlocal

访问的之后直接访问前端的地址

前端中访问接口要配置反代

1
2
3
4
5
6
7
8
9
10
11
server: {
port: 5174,
strictPort: true,
proxy: {
// 代理后端接口
"/api": {
target: "http://localhost:8080",
changeOrigin: true
}
}
}

接口依赖要有

1
2
3
4
5
6
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>