Java Spring Boot 项目中嵌入前端静态资源：完整教程与实战案例

言简意赅的讲解Java Spring Boot 中嵌入前端项目的静态资源解决的痛点

之前给大家讲解了如何部署一个前端项目，但大家还是好奇如何部署一个前后端一体项目。将前端构建后的静态资源嵌入 Java Spring Boot 后端项目，是现代全栈开发中一种流行的实践方式。本文将详细讲解这样做的好处，并通过代码示例和实践演示，帮助你轻松实现这一目标。最后，我们还会探讨如何优化静态资源访问路径，使用户体验更加友好。

一、在 Spring Boot 中嵌入静态资源的好处

1.1 好处概述

简化交付流程

前端打包生成的静态资源与后端结合为一个单独的可运行文件（如 jar 或 war），客户只需运行一个文件即可启动整个系统，无需分别部署前端和后端服务。
独立开发，协作灵活

在开发阶段，前后端仍可以分为两个独立团队，分别开发和调试。前端完成开发后，通过构建工具（如 Webpack、Vite）生成静态资源文件，后端只需加载这些文件即可。
部署维护方便

只需部署一个 Spring Boot 服务，无需额外配置 Nginx 或其他静态资源服务器，降低部署复杂度，减少维护成本。

二、实现步骤与代码示例

2.1 项目目录结构规划

为了更好地管理嵌入的前端静态资源，建议使用如下的项目目录结构：

复制代码

project-root/
├── src/
│   ├── main/
│   │   ├── java/
│   │   ├── resources/
│   │   │   ├── static/           # 存放前端打包后的静态资源
│   │   │   │   ├── index.html
│   │   │   │   ├── css/
│   │   │   │   ├── js/
│   │   │   │   ├── images/
│   │   │   └── application.properties
│   │   └── Application.java
├── frontend/                     # 前端项目目录（开发阶段）
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── vite.config.js
└── pom.xml

2.2 前端构建与资源存放

前端项目打包

假设你的前端使用 Vite 或 Webpack 构建，运行如下命令生成构建文件：
bash 复制代码
```
npm run build
```
生成的文件通常位于 dist/ 目录下，其中包括 index.html 和相关静态资源文件（如 css/、js/ 文件夹）。
拷贝静态资源到后端项目

将 dist/ 中的所有文件复制到 Spring Boot 项目的 src/main/resources/static/ 目录下。

注意： src/main/resources/static/ 是 Spring Boot 的默认静态资源目录，放置在此的文件可以直接通过浏览器访问。

2.3 后端代码示例

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);
    }
}

重要提示 ：如果你只需要静态资源，而不打算使用 Spring MVC 来拦截路径，请确保 src/main/resources/static/ 中的文件名和路径完全一致。Spring Boot 会自动将这些文件直接暴露为静态资源。

2.4 访问测试

完成上述步骤后，运行 Spring Boot 项目并访问以下 URL：

http://localhost:8080/index.html
http://localhost:8080/css/style.css
http://localhost:8080/js/app.js

你会发现静态资源可以正常加载。但这里存在一个问题：URL 必须以 .html 结尾，这不够美观且容易暴露文件类型。

三、优化静态资源访问路径

为了去掉 .html 后缀，提供更优雅的访问方式，我们可以通过以下两种方式解决：

3.1 使用 Nginx 配置 URL 重写

如果最终的部署环境中使用了Nginx，可以通过配置重写规则来去掉 .html 后缀。例如：

nginx 复制代码

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/static/files;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }
}

上述规则会优先匹配文件路径，若文件路径不存在，则尝试追加 .html 后缀。

3.2 使用 Spring MVC 实现 URL 重写

如果没有使用 Nginx，可以通过 Spring MVC 自定义控制器来实现 URL 重写。

添加控制器代码

java 复制代码

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebController {

    @GetMapping("/{path:[^\\.]*}") // 匹配路径中不包含"."的请求
    public String forwardToIndex() {
        return "forward:/index.html"; // 转发到 index.html
    }
}

功能说明

该控制器会将所有不包含文件后缀的请求（如 /about、/contact）转发到 index.html。
这样，访问 http://localhost:8080 或 http://localhost:8080/about 时，都会加载前端的 index.html。

四、总结

通过将前端构建后的静态资源嵌入到 Spring Boot 项目中，可以显著简化交付和部署流程。为了提升用户体验，可以通过配置 Nginx 或 Spring MVC 实现 URL 优化。以下是整个流程的核心步骤总结：

前后端独立开发，前端打包输出静态资源文件。
将构建好的文件复制到 Spring Boot 的 src/main/resources/static/ 目录下。
运行后端项目，确保静态资源可以正常访问。
通过 Nginx 或 Spring MVC 优化路径访问。

按照本文的指导，你可以轻松实现一个既美观又高效的全栈项目交付方案。

通过上述内容，你就已经基本理解了这个方法，基础用法我也都有展示。如果你能融会贯通，我相信你会很强

Best

Wenhao (楠博万)