JavaScript与SpringBoot打包部署结合的方法-js教程-PHP中文网

JavaScript与SpringBoot打包部署结合的方法

星夢妙者

发布： 2025-11-05 21:07:02

原创

785人浏览过

答案是将前端打包后的静态资源放入SpringBoot的src/main/resources/static目录，并配置路由支持history模式，最后通过Maven打包成可执行JAR文件，实现前后端一体化部署。

javascript与springboot打包部署结合的方法

JavaScript前端与SpringBoot后端结合部署，通常是指将前端构建产物（如HTML、JS、CSS等静态资源）集成到SpringBoot应用中，通过一个JAR包统一运行。这种方式适合中小型项目，简化部署流程，无需额外配置Nginx或独立的前端服务器。

1. 前端打包：生成静态资源

假设你使用的是Vue、React或Angular这类基于JavaScript的前端框架：

npm run build

构建完成后，会在dist（或build）目录下生成所有静态文件。

2. 将静态资源放入SpringBoot项目

SpringBoot默认从src/main/resources/static目录提供静态资源服务。你需要把前端构建输出的文件复制到这里：

删除src/main/resources/static原有内容（如有）
将dist目录下的所有文件复制到static目录中

完成后结构如下：

立即学习“Java免费学习笔记（深入）”；

src/
└── main/
└── resources/
└── static/
├── index.html
├── js/
├── css/
└── assets/

3. 配置路由：支持前端History模式

如果前端使用了vue-router或react-router的history模式，刷新页面会报404。需要让SpringBoot将未知请求重定向到index.html：

添加一个简单的控制器：

@RestController
public class SpaFallbackController {
    @RequestMapping("/\*")
    public String index() {
        return "index.html";
    }
}

或者在配置类中使用WebMvcConfigurer注册资源处理器：

BibiGPT-哔哔终结者

B站视频总结器-一键总结音视频内容

查看详情

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/")
            .setCachePeriod(0);
    }
}

4. 打包部署：使用Maven构建可执行JAR

确保pom.xml中配置了SpringBoot的Maven插件：

<build>
  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
  </plugins>
</build>

然后执行打包：

mvn clean package

生成的JAR文件位于target/目录，包含前端静态资源和后端逻辑。

运行即可：

java -jar your-app.jar

访问http://localhost:8080即可看到前端页面，API请求由SpringBoot后端处理。

基本上就这些。整个过程核心是把前端构建结果放进SpringBoot的静态资源目录，再通过简单路由配置支持单页应用。部署时只需一个Java环境，运维更简单。

以上就是JavaScript与SpringBoot打包部署结合的方法的详细内容，更多请关注php中文网其它相关文章！