Vite 代理与 Nginx 代理:开发与生产环境的配置差异
一句话总结:Vite 代理是开发时的'临时桥梁',Nginx 代理是生产环境的'全能守门员'——二者定位不同,绝非替代关系。
在前后端分离开发中,代理配置是绕不开的话题。许多开发者常陷入困惑: ❓'Vite 的 proxy 能不能直接用到线上?' ❓'开发时有必要搭 Nginx 吗?' ❓'两者配置看起来差不多,本质区别在哪?'
本文用最直白的语言 + 实战配置,彻底讲清核心差异。
一、本质定位:解决不同阶段的问题
| 维度 | Vite 代理 | Nginx 代理 |
|---|---|---|
| 核心角色 | Vite Dev Server 内置功能(Node.js 层) | 独立高性能反向代理服务器 |
| 存在阶段 | 仅 vite dev 启动时生效 | 7×24 小时运行的生产服务 |
| 设计目标 | 开发提效:绕过浏览器跨域,专注联调 | 生产护航:高可用、安全、性能、运维 |
| 能否上生产 | ❌ 绝对禁止(性能弱、无安全防护、单点故障) | ✅ 行业标准方案 |
💡 关键认知:Vite 代理是'开发工具链的一环',Nginx 代理是'基础设施组件'。混淆二者如同用调试器当防火墙——危险!
二、配置对比:简洁 vs 全能
Vite 代理(vite.config.js)
export default {
server: {
proxy: {
'/api': {
target: 'http://dev-api.example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
secure: false // 开发环境可忽略 HTTPS 证书校验
},
'/ws': {
target: 'ws://localhost:8080',
ws: true
}
}
}
}

