若依分离版前端部署在tomcat刷新404的问题解决方法

步骤如下:

1、在前端项目的 public 目录(或打包后的根目录)中,创建 WEB-INF 文件夹

(若打包后的前端文件放在 Tomcat 的 webapps/ROOT 下,则直接在 ROOT 目录下创建 WEB-INF)

2、在 WEB-INF 中创建 web.xml 文件,添加如下配置:

d 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    
    <!-- 配置欢迎页为 index.html -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    
    <!-- 配置错误页重定向:将 404 请求转发到 index.html -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

3、重新打包前端项目,将打包后的文件(包含 WEB-INF 文件夹)部署到 Tomcat 的 webapps/ROOT 目录(或自定义上下文路径)。

4、重启 Tomcat,刷新页面即可正常访问。

补充说明:

若前端项目部署在 Tomcat 的非根路径(如 webapps/ruoyi-ui),需确保 web.xml 中的 路径与实际上下文匹配(例如 /ruoyi-ui/index.html)。

若使用 Nginx 作为反向代理,也可在 Nginx 中配置类似的路由重定向(比 Tomcat 配置更常用),示例:

location / {

root /path/to/ruoyi-ui; # 前端打包目录

index index.html;

try_files uri uri/ /index.html; # 核心:重定向到 index.html

}

通过以上配置,Tomcat 会将所有前端路由的刷新请求指向 index.html,由前端框架解析路由,避免 404 错误。

相关推荐
酉鬼女又兒2 分钟前
零基础入门前端JavaScript 核心语法:var/let/const、箭头函数与 setTimeout 循环陷阱全解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·蓝桥杯
Bling_Bling_16 分钟前
【无标题】
前端·网络协议
We་ct7 分钟前
React Diff & Key 核心解析
开发语言·前端·javascript·react.js·前端框架·reactjs·diff
哥本哈士奇8 分钟前
Vue 3 快速入门:从零搭建前后端 CRUD 应用
前端·javascript·vue.js
biubiubiu07068 分钟前
Agent 是如何拥有“手脚”的(ReAct 运行流程)
开发语言·前端·javascript
佩奇大王10 分钟前
P159 摆动序列
java·开发语言·算法
计算机学姐11 分钟前
基于SpringBoot的网吧管理系统
java·spring boot·后端·spring·tomcat·intellij-idea·mybatis
摸鱼的春哥12 分钟前
Agent教程21:知识图谱🕸,让AI🤖学会联想
前端·javascript·后端
SuperEugene12 分钟前
Vue3 组件拆分实战规范:页面 / 业务 / 基础组件边界清晰化,高内聚低耦合落地指南|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
泯泷13 分钟前
阶段二:为什么先设计指令集,编译器和运行时才能稳定对齐?
前端·javascript·架构