通过Nginx反向代理访问Vite React开发版遇乱码问题求助

Vite开发服务器默认以根路径（/）为基准生成资源URL和热更新连接，当你通过Nginx将/dev路径代理到5173端口时，存在两个核心问题：

1. Vite生成的资源（JS、CSS、静态文件）路径仍为根路径（如/src/main.js），但Nginx代理后这些请求会被路由到预览版的4173端口，导致资源加载错误，页面显示乱码。
2. Vite的热更新（HMR）依赖WebSocket连接，Nginx默认不会转发WebSocket请求，导致开发服务器无法正常和浏览器通信，进一步引发页面异常。

1. 修改Vite开发服务器配置，适配子路径 #

在项目根目录的vite.config.js中添加base配置，指定开发环境的资源基准路径为/dev/：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173
  },
  // 关键配置：匹配Nginx的代理路径
  base: '/dev/'
})

修改后重启Vite开发服务器，此时Vite生成的所有资源URL都会自动带上/dev前缀。

2. 完善Nginx代理配置 #

更新你的Nginx配置文件，确保正确转发HTTP和WebSocket请求，并处理路径前缀：

server {
    listen 80;
    server_name localhost;

    # 根路径代理到预览版（4173端口）
    location / {
        proxy_pass http://localhost:4173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # /dev路径代理到开发版（5173端口）
    location /dev/ {
        # 末尾的斜杠是关键：将/dev/xxx转发为5173/xxx
        proxy_pass http://localhost:5173/;
        
        # 传递必要的请求头，确保Vite能正确识别请求来源
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 处理Vite热更新的WebSocket连接
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # 可选：强制设置字符编码，避免乱码
        proxy_set_header Accept-Encoding "";
        charset utf-8;
    }
}

配置完成后，重启Nginx服务：

# Linux/macOS
sudo nginx -s reload

# Windows（根据Nginx安装路径调整）
cd C:\nginx-xxx
nginx -s reload

验证访问 #

现在访问http://localhost/dev即可正常加载Vite开发版，热更新功能也能正常工作；访问http://localhost则加载预览版。

内容的提问来源于stack exchange，提问作者b442