Vue3项目在Nginx中配置代理后端IP

在 vite.config.js 中配置的 server.proxy 仅在 Vite 开发服务器 （即你运行 npm run dev 或 yarn dev 时）生效。当你将 Vue 3 项目打包（npm run build）并部署到 Nginx 后，这个配置文件不会被带进生产环境，Nginx 也完全不会读取 vite.config.js 文件。

---

1. 为什么无效？

• Vite 的代理原理 ：它基于 Node.js 的 http-proxy 库，在开发时启动了一个中间件服务。浏览器访问 http://localhost:3000/api，Vite 服务器接收请求后转发给 http://localhost:8060。
• Nginx 的托管原理 ：Nginx 直接托管 dist 目录下的静态文件（HTML/JS/CSS）。当浏览器请求 /api 时，请求直接打到 Nginx 监听的端口（如 80/443），Nginx 不会因为 Vite 的配置文件而自动代理。

---

2. 如何在 Nginx 中实现相同的代理效果？

你需要在 Nginx 的配置文件 （通常是 nginx.conf 或 /etc/nginx/conf.d/your-project.conf）中手动添加反向代理配置。

假设你的 Vue 应用部署在 /usr/share/nginx/html，后端接口在 http://localhost:8060，配置如下：

server {
    listen 80;
    server_name your-domain.com; # 你的域名或 IP

    # 托管 Vue 静态文件
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html; # 解决 Vue Router 刷新 404 问题
    }

    # 代理 /api 请求（等效于 Vite 的 proxy 配置）
    location /api {
        proxy_pass http://localhost:8060; # 对应 target

        # 等效于 changeOrigin: true
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 可选：如果你在 Vite 中配置了 rewrite，在这里对应修改
        # 例如 Vite 的 rewrite: (path) => path.replace(/^\/api/, '')
        # 则这里 proxy_pass 末尾加斜杠：proxy_pass http://localhost:8060/;
    }
}

配置完成后，执行 nginx -t 检查语法，然后 nginx -s reload 重载配置即可生效。

---

3. 特别提醒：跨域（CORS）

• 在 Vite 开发环境中，代理绕过了浏览器的跨域限制。
• 在 Nginx 生产环境 中，使用上述 proxy_pass 同样绕过了跨域（因为请求是 Nginx 服务端转发的），不需要在后端代码中额外开启 CORS，除非前端直接请求后端 IP 而非通过 Nginx。

---

4. 补充：vite preview 呢？

如果你运行 npm run preview（即 vite preview --port 3000），这个命令会启动一个生产预览服务器，此时 server.proxy 是生效的。但这仅用于本地预览，不适用于生产环境部署，且性能远不如 Nginx，不建议用这种方式替代 Nginx 对外提供服务。

总结 ：生产环境务必把代理逻辑写在 Nginx 配置中，vite.config.js 里的 server 配置只属于开发环境。如果你对 Nginx 配置不熟悉，可以直接复制上面的 location /api 代码块使用。如果有路径重写等特殊需求，可以告诉我，我帮你调整配置。