Nginx配置Django+Vue同服务器部署时Vue路由直接访问404问题求解

云上老周

2026-9-30

问题根源

原有location /块的root路径和try_files里的index路径不一致，且try_files末尾多余的=404会导致没有匹配到静态资源时直接返回404，没有正确fallback到Vue的index.html处理前端路由
你额外添加的正则location优先级高于普通前缀location，会覆盖/backend/、/static/等预设的路径规则，同时逻辑错误引发无限重定向
原有upstream配置的socket路径存在多余空格，可能导致Django服务连接异常

修正后完整Nginx配置

# the upstream component nginx needs to connect to
upstream myproject {
    # 移除了路径里的多余空格
    server unix:///tmp/myproject.sock;
}

server {
  listen 80;
  listen [::]:80;
  server_name serverurl.com;
  return 301 https://serverurl.com$request_uri;
}

server {
  listen 443 ssl;
  listen [::]:443 ssl;

  ssl_certificate /home/projects/myproject/ssl/ANY.serverurl.com.crt;
  ssl_certificate_key /home/projects/myproject/ssl/ANY.serverurl.com.key;

  server_name serverurl.com www.serverurl.com;
  access_log /home/projects/myproject/logs/nginx_access.log;
  error_log /home/projects/myproject/logs/nginx_error.log;

  location / {
      # 确认此处是你Vue打包后dist目录的实际路径，要和你本地存储路径匹配
      root /home/projects/myproject/vue/dist;
      # 先匹配对应路径的静态文件，找不到就直接返回index.html给Vue路由处理
      try_files $uri $uri/ /index.html;
  }
  
  location /backend/ {
    include /etc/nginx/uwsgi_params;
    uwsgi_pass myproject;
  }

  location /static/ {
    alias /home/projects/myproject/static/;
  }
  
  location /media/ {
    alias /home/projects/myproject/media/;
  }
}