SpringBoot项目部署打包好的React、Vue项目刷新报错404

简介: 本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。

Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.
Tue Nov 02 14:08:54 CST 2021
There was an unexpected error (type=Not Found, status=404).

原因是因为在SpringBoot部署后,前端页面刷新,浏览器将url中的地址当做接口地址去请求后端了,并且后端没有这个接口。

第一种解决方案

因为react或者vue都是spa应用,所以直接将错误的接口地址返回主页index.html即可。

需要在启动类中设置当报404以后让它跳转回登录页面

@Bean
    public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
   
        return factory -> {
   
            ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
            factory.addErrorPages(error404Page);
        };
    }

另一种解决方案

将前端的路由形式改成hash形式。

目录
相关文章
|
XML Java 应用服务中间件
SpringBoot-打包&部署
SpringBoot 项目支持两种打包方式:WAR 包和 JAR 包。JAR 包内置 Tomcat,可直接运行;WAR 包需部署在外部 Tomcat 上。JAR 包通过 `mvn clean package` 打包并用 `java -jar` 运行,支持后台运行和 JVM 参数配置。WAR 包需修改 pom.xml 为 war 类型,移除嵌入式 Tomcat 依赖,添加 servlet-api,并继承 `SpringBootServletInitializer`。配置文件可通过外部 application.yml 覆盖,默认优先级高于 JAR 内部配置。
1841 17
SpringBoot-打包&部署
|
11月前
|
NoSQL Java 网络安全
SpringBoot启动时连接Redis报错:ERR This instance has cluster support disabled - 如何解决?
通过以上步骤一般可以解决由于配置不匹配造成的连接错误。在调试问题时,一定要确保服务端和客户端的Redis配置保持同步一致。这能够确保SpringBoot应用顺利连接到正确配置的Redis服务,无论是单机模式还是集群模式。
807 5
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
833 83
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
625 13
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
709 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
JavaScript 前端开发 Java
Idea启动SpringBoot程序报错:Veb server failed to start. Port 8082 was already in use;端口冲突的原理与解决方案
本文解决了Idea启动SpringBoot程序报错:Veb server failed to start. Port 8082 was already in use的问题,并通过介绍端口的使用原理和操作系统的端口管理机制,可以更有效地解决端口冲突问题,并确保Web服务器能够顺利启动和运行。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 算法
vue和react 哪个更强大
vue和react 哪个更强大
496 3
|
Java 应用服务中间件 Maven
SpringBoot项目打包成war包
通过上述步骤,我们成功地将一个Spring Boot应用打包成WAR文件,并部署到外部的Tomcat服务器中。这种方式适用于需要与传统Servlet容器集成的场景。
1924 8
|
存储 Java 持续交付
GitHub-Actions-SpringBoot项目部署
通过以上配置,当代码推送到GitHub仓库时,GitHub Actions将自动执行构建和部署过程,实现持续集成和持续部署。这不仅提高了开发效率,还减少了手动部署的风险。确保每一步操作都正确无误,可以避免常见的CI/CD问题。
791 14
|
Java 应用服务中间件
SpringBoot工程打包部署
SpringBoot工程打包部署简介:SpringBoot项目可通过三种方式运行:可执行Jar包、可执行War包和标准War包。其中,可执行Jar/War包可独立运行,标准War包需部署在Tomcat中。具体步骤包括:1. 修改pom.xml添加构建依赖;2. 执行`mvn clean package`命令打包;3. 运行生成的Jar/War包(如`java -jar xxx.jar`)。对于标准War包,还需修改启动类并配置Tomcat依赖。
1731 7