Ant Design构建完成后与Spring Boot集成部署

最新推荐文章于 2025-06-24 16:13:28 发布

原创最新推荐文章于 2025-06-24 16:13:28 发布 · 9.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#Spring Boot #Ant Design #antd

解决方法专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何解决AntDesign构建后与SpringBoot集成时遇到的404错误问题，通过Nginx反向代理或SpringBoot自定义错误页面的方式，确保所有路径请求都能正确返回index.html，实现前端路由的正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ant Design构建完成后只有一个index.html页面和一些js、css文件，当使用browserHistory，如果直接放在Spring Boot的resource/static文件夹下面，当浏览器直接访问或者在非 "/ “，”/index"路径刷新时，由于服务器无法正确响应，会直接触发404报错。

解决方法

解决思路：浏览器访问任何404错误路径都返回 /index.html文件。剩下的事情交给前端路由

1、使用Nginx反向代理

Nginx作为静态资源服务器，将api请求代理到Spring Boot部署的URL和端口。

# 其他配置自行参考nginx配置
server {
    listen 80; 端口号
    root 构建的index.html页面和一些js、css文件放置目录;
    location / {
        # browserHistory
        try_files $uri $uri/ /index.html;
        # 或者
         error_page 404  /index.html
    }
    location /api {
        proxy_pass https://spring boot 部署的url和端口号;
    }
}

2、配置Spring Boot，/error路径返回index页面

解决browserHistory构建完成后直接放到Spring Boot 项目的resource/static目录下面，浏览器在其他路径刷新或者直接访问无法加载视图的方法。

找到一个非常简单的方法了，使用ErrorController和修改application.properties文件:

application.properties添加:

spring.mvc.view.suffix=.html

Java代码：

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class AntDesignController implements ErrorController {
    @Override
    public String getErrorPath(){
        return "/error";
    }

    @RequestMapping(value = "/error")
    public String getIndex(){
        return "index"; //返回index页面
    }

}

Kotlin代码

import org.springframework.boot.web.servlet.error.ErrorController
import org.springframework.stereotype.Controller
import org.springframework.web.bind.annotation.RequestMapping

@Controller
class AntDesignController: ErrorController {
    @RequestMapping("/error")
    fun getIndex():String{
        return "index"
    }
    override fun getErrorPath(): String {
        return "/error"
    }
}