做前端开发的兄弟，谁没被这个坑恶心过？明明本地跑得好好的，一打包部署到服务器，接口全挂，404、跨域、甚至直接白屏。这篇就是专门解决这个问题的，让你不管在本地还是线上，都能稳稳当当地调通接口，不再因为环境差异抓狂。

咱们干开发的都知道，Ant Design 这玩意儿确实好用，组件库齐全，样式也好看。但是，它毕竟是个 UI 框架，底层还是得靠 Vite 或者 Webpack 这些构建工具来搞事情。很多新手或者急着上线的项目，容易忽略一个细节：构建工具里的代理配置，默认是只在开发环境生效的。

你想想，开发服务器（dev server）里有个 proxy 配置，能把 /api 开头的请求转发到后端。这玩意儿在生产环境根本不起作用，因为生产环境通常直接由 Nginx 或者 Apache 托管静态文件。这时候，如果你还在代码里硬编码那个开发环境的地址，或者指望构建工具自动帮你处理跨域，那基本就是等着报错。

我见过太多人，本地调试顺风顺水，一部署就懵圈。其实解决办法挺简单的，核心思路就一个：区分环境。

别搞那些花里胡哨的复杂配置，就用最朴素的 .env 文件。在根目录下建个 .env.production，里面写 VITE_API_BASE_URL=http://your-server.com/api。然后在 .env.development 里写 VITE_API_BASE_URL=/api。注意，这里的关键是，开发环境用相对路径，让代理去处理；生产环境用绝对路径，直接请求后端。

这样改完，你的 axios 或者 fetch 请求里，直接引用这个环境变量就行。比如 const baseUrl = import.meta.env.VITE_API_BASE_URL;。简单粗暴，有效。

但是，这里有个坑，很多人会忽略。就是 Antd 本身的一些组件，比如 Upload 上传组件，或者一些内部请求，可能不会走你自定义的 axios 实例。这时候，你就得去翻 Antd 的文档，看看有没有全局配置的地方。比如，你可以配置一个全局的 request 拦截器，或者在 App 组件里包裹一个 Provider，把 base URL 传下去。

还有啊，别光盯着前端代码。Nginx 的配置也得跟上。生产环境部署时，Nginx 得配置反向代理，把 /api 的请求转发到你的后端服务。这一步要是没做好，前端就算改对了环境变量，请求也是发不出去的。

有时候，你会遇到一种情况，就是本地调试时，代理配置写得有点乱，导致请求路径不对。这时候，你可以在浏览器控制台看看 Network 面板，看看实际发出的请求 URL 是什么。对比一下你的代理配置，看看是不是匹配错了前缀。

另外，缓存也是个头疼的问题。有时候你改了配置，刷新页面还是老样子。这时候，记得清一下浏览器缓存，或者用无痕模式试试。构建工具有时候也会缓存旧的配置，导致你改了半天没效果。

说实话，这个问题折腾起来挺烦人的，但一旦理顺了，后面就省心多了。别怕麻烦，一步步排查，总能找到原因。记住，开发环境靠代理，生产环境靠 Nginx 和绝对路径，这是铁律。

最后，再啰嗦一句，代码提交前，最好在不同的环境下都测一遍。别等用户报错了，才想起来去查日志。那样太被动了。咱们做技术的，就得有点强迫症，把问题消灭在萌芽状态。

希望这点经验能帮到你，要是还有啥不懂的，多看看官方文档，或者去社区里问问，大家都不容易，互相帮衬着点。