Docker+Nginx部署Vue应用时Vite反向代理失效问题

问题根源 #

Vite的server.proxy是开发环境专属配置，仅在npm run dev启动开发服务器时生效，用于解决开发阶段的跨域问题。当执行npm run build打包生产代码后，该配置不会被打包到dist目录中。

生产环境下，前端发起的API请求会直接发送到Nginx服务器，但你的Nginx配置中没有对应接口的反向代理规则，导致Nginx误以为/auth/login-user是静态文件路径，尝试到/usr/share/nginx/html目录下查找该文件，最终报出" No such file or directory"错误。

解决方案 #

修改Nginx配置，添加反向代理规则，并处理Vue单页应用的路由刷新问题：

完整的nginx.conf配置 #

events {
}

http {
    include mime.types;

    server {
      listen 80;
      server_name localhost;
      root /usr/share/nginx/html;

      # 处理Vue单页应用路由，避免刷新页面404
      location / {
          try_files $uri $uri/ /index.html;
      }

      # 反向代理登录接口
      location /auth/login-user {
          proxy_pass http://back-end:8081/backend/auth/user/login;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }

      # 反向代理创建用户接口
      location /user/create-user {
          proxy_pass http://back-end:8081/backend/auth/user/create;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
    }
}

配置说明 #

• location /块：通过try_files指令，将所有未匹配到静态文件的请求转发到index.html，解决Vue单页应用刷新页面404的问题。
• 两个location块：分别匹配前端发起的/auth/login-user和/user/create-user请求，将其转发到后端服务的对应接口地址，并设置必要的请求头，确保后端能正确获取客户端信息。

验证步骤 #

1. 保存修改后的nginx.conf文件
2. 重启Docker服务：

docker-compose down && docker-compose up -d --build

3. 访问前端页面，测试登录、创建用户等接口功能是否正常。

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