若依分离版前端部署在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 错误。

相关推荐
锋行天下39 分钟前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架
光影少年1 小时前
原生DOM操作在React 中的注意事项
前端·javascript·react.js
shepherd1111 小时前
吞吐量提升 10 倍:高并发大批量数据处理任务的架构演进与性能调优
java·后端·架构
禅思院3 小时前
前端部署“三层漏斗”完全指南:从CI/CD到自动回滚的工程化实战【开题】
前端·架构·前端框架
快乐肚皮4 小时前
深入理解Loop Engineering
前端·后端
风骏时光牛马4 小时前
VHDL十大经典基础功能设计实例代码合集
前端
plainGeekDev4 小时前
单例模式 → object 声明
android·java·kotlin
hunterandroid4 小时前
Notification 通知:从基础到渠道适配
前端
孟陬4 小时前
Claude Code 巧思 `Ctrl+S` 暂存键
前端·后端
PedroQue994 小时前
V1.6.1性能优化:高频路径提速与代码精简
前端·uni-app