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

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

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

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

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

假设你使用的是vuereactangular这类基于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-routerreact-router的history模式,刷新页面会报404。需要让SpringBoot将未知请求重定向到index.html

添加一个简单的控制器:

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

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

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

BibiGPT-哔哔终结者

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

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

查看详情 JavaScript与SpringBoot打包部署结合的方法

@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环境,运维更简单。

上一篇
下一篇
text=ZqhQzanResources