Vite 代理与 Nginx 代理：开发与生产环境的配置差异

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
      }
    }
  }
}