Umi&React antd pro 增加前缀打包部署后404与刷新找不到资源问题

### Ant Design Pro 部署后刷新页面问题解决方案 当部署 Ant Design Pro 应用至生产环境并遇到刷新页面返回 404 错误的情况时，这通常是因为前端路由模式与服务器配置之间的兼容性问题所引起的。对于采用 HTML5 History 模式的单页应用 (SPA)，每次刷新都会尝试加载特定路径下的资源而非指向 `index.html` 文件来让前端框架接管后续的路由处理。 #### 使用 Nginx 进行反向代理设置 为了确保无论用户如何导航或是手动输入 URL 地址都能正确显示应用程序的内容而不是收到 404 错误响应，可以在 Nginx 中调整站点配置以重定向所有请求到根目录下的 `index.html` 文件： ```nginx server { listen 80; server_name yourdomain.com; location / { root /path/to/your/build/folder; try_files $uri $uri/ /index.html; } } ``` 这段配置中的关键在于最后一行 `try_files $uri $uri/ /index.html;` 它会告诉 Nginx 尝试匹配静态文件如果找不到则返回 `index.html` 让 React Router 或者其他类似的库去解析实际应该展示哪个组件[^4]。 #### 对于 Aliyun OSS 存储服务 如果是将构建好的项目上传到了阿里云对象存储(OSS)上，则需要利用其自带的功能实现类似的效果——即开启网站托管功能并将默认首页设为 `index.html` 同时指定自定义错误文档同样指向该文件。这样即使发生未找到资源的情形也会被导向主页从而避免了直接暴露给用户的尴尬局面[^1]。 #### 处理 API 请求跨域及 Mock 数据模拟 另外值得注意的是，在开发阶段可能会依赖本地运行的服务端接口或者是 mock 接口来进行调试测试工作；然而一旦进入正式上线前准备环节就必须考虑到真实环境中可能存在的 CORS 跨源资源共享限制以及怎样合理安排线上使用的假数据供应机制等问题。可以考虑借助诸如 Umi 提供的相关工具链支持如 umi-serve 结合 PM2 来保持后台进程稳定在线的同时满足上述需求[^3]。