解决Ant Design Pro项目部署到Tomcat后刷新404问题

问题背景

在将Ant Design Pro项目部署到Tomcat服务器时，开发者经常会遇到一个典型问题：首次访问页面可以正常显示，但在刷新页面时却出现404错误。这种现象在单页应用(SPA)部署到传统Web服务器时尤为常见。

问题根源分析

这个问题的根本原因在于Tomcat等传统Web服务器与前端路由机制的不匹配。Ant Design Pro基于React和Umi框架构建，采用前端路由机制，而Tomcat默认配置下会尝试根据URL路径寻找对应的物理文件，导致刷新时找不到对应资源。

详细解决方案

1. 正确配置Umi项目

在Ant Design Pro项目的config/config.ts文件中，需要确保以下配置项设置正确：

{
  publicPath: '/',
  base: '/',
  history: { type: 'browser' }
}

publicPath指定静态资源的基础路径，base设置路由的基础路径，两者都应设为根路径'/'。history.type设置为'browser'启用HTML5 History API模式的路由。

2. 配置Tomcat服务器

2.1 修改web.xml文件

在Tomcat的conf/web.xml文件中添加以下配置，将所有404错误重定向到index.html：

<error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
</error-page>

2.2 配置Context路径

在conf/server.xml文件中，确保Context配置正确指向部署目录：

<Context path="" docBase="/path/to/your/dist" reloadable="true"/>

3. 构建和部署流程

1. 运行构建命令：

npm run build

2. 将dist目录下的所有文件复制到Tomcat的webapps/ROOT目录下

3. 重启Tomcat服务器使配置生效

4. 高级配置选项

对于更复杂的部署场景，可以考虑以下额外配置：

4.1 使用URL Rewrite

在Tomcat中配置URL重写规则，将所有非静态资源请求重定向到index.html。这可以通过在WEB-INF目录下添加urlrewrite.xml文件实现。

4.2 静态资源缓存控制

为优化性能，可以配置静态资源的缓存策略，在web.xml中添加静态资源缓存设置。

常见问题排查

1. 部署后样式丢失：检查publicPath配置是否正确，确保CSS和JS文件路径正确加载。

2. API请求404：确认代理配置正确，或者API服务地址配置正确。

3. 路由跳转异常：检查base配置是否与部署路径匹配。

4. 浏览器控制台报错：查看具体错误信息，通常能快速定位问题所在。

最佳实践建议

1. 在开发环境和生产环境使用相同的路由模式，避免因模式不同导致的问题。

2. 部署前在本地使用serve等工具测试构建结果，确认基本功能正常。

3. 保持Ant Design Pro和Umi框架版本更新，及时修复已知问题。

4. 对于企业级部署，考虑使用Nginx等现代Web服务器作为前端，Tomcat作为后端API服务。

通过以上配置和最佳实践，可以确保Ant Design Pro项目在Tomcat服务器上稳定运行，解决刷新404的问题，为用户提供流畅的单页应用体验。