一、只启动 Spring Boot 后端，就能通过前端页面访问

要实现 “只启动 Spring Boot 后端，就能访问前端页面”，核心是将前端打包好的dist目录下的静态资源（HTML、CSS、JS、图片等），放到 Spring Boot 默认的静态资源扫描目录中。以下是具体配置方案：

一、核心目录：Spring Boot 默认静态资源目录

Spring Boot 启动时，会自动扫描并加载以下 4 个目录下的静态资源（优先级从高到低），直接将dist的内容放入其中即可：

二、正确的文件放置方式（以static目录为例）

关键：不要将dist文件夹本身放入static，而是将dist内的所有文件直接复制到static目录下。

1. 前端dist的典型结构

假设前端打包后，dist目录内的文件如下：

dist/
├─ index.html  （前端入口页面，必须有）
├─ css/        （样式文件目录）
│  └─ app.css
├─ js/         （脚本文件目录）
│  └─ app.js
└─ img/        （图片等资源目录）
   └─ logo.png

2. 复制到 Spring Boot 的static目录后

最终 Spring Boot 项目的资源目录结构应如下：

your-springboot-project/
└─ src/
   └─ main/
      └─ resources/
         ├─ application.properties  （Spring Boot配置文件）
         └─ static/  （静态资源目录，放入dist的所有内容）
            ├─ index.html  （直接放，不是static/dist/index.html）
            ├─ css/
            │  └─ app.css
            ├─ js/
            │  └─ app.js
            └─ img/
               └─ logo.png

三、访问前端页面的方式

1. 启动 Spring Boot 后端：运行 Spring Boot 主类（带@SpringBootApplication注解的类）。

2. 访问前端页面

   ：打开浏览器，输入后端服务的地址（默认端口为 8080，可在application.properties中通过server.port修改）：

   • 直接访问根路径：http://localhost:8080（Spring Boot 会自动找到static下的index.html作为默认首页）。
   • 若前端路由是 Hash 模式（如#/home），直接访问http://localhost:8080/#/home即可。

四、特殊场景：前端使用 History 路由（需额外配置）

如果前端使用History 模式路由（如 Vue Router 的mode: 'history'），直接访问子路由（如http://localhost:8080/home）会出现 404 错误（因为后端无法识别前端路由）。此时需在 Spring Boot 中添加路由转发配置，将所有非 API 请求转发到index.html。

配置步骤：

1. 创建一个配置类（如WebConfig），实现WebMvcConfigurer接口：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 将所有非API的GET请求，转发到/index.html（前端负责路由解析）
        // 若后端API有统一前缀（如/api），可排除/api路径，避免API请求被转发
        registry.addViewController("/**")
                .setViewName("forward:/index.html")
                .setOrder(Ordered.LOWEST_PRECEDENCE); // 确保优先级低于API路由
    }
}

1. 说明：该配置会将所有后端未匹配的 GET 请求（如/home、/user）转发到index.html，由前端路由接管解析，避免 404。

五、总结

1. 普通场景：直接将dist内的所有文件复制到src/main/resources/static/，启动后端后访问http://localhost:端口即可。
2. History 路由场景：在上述基础上，添加 WebMvc 配置转发非 API 请求到index.html。

这种方式本质是让 Spring Boot 作为 “静态资源服务器” 托管前端文件，无需额外启动 Nginx 等前端服务器，适合开发环境或小型项目部署。