Vue Router+Nginx反向代理：路径访问空白/500错误求助

问题原因 #

你的场景是Nginx反向代理后端托管的Vue应用，而非直接在Nginx本地部署静态文件。直接照搬Vue Router文档里的try_files $uri $uri/ /index.html;会导致Nginx在本地文件系统查找/index.html，找不到就触发500错误；而原配置中直接代理带路径的请求（如/companies）时，后端静态服务会因找不到对应文件返回404，导致Vue Router无法接管路由。

正确配置方案 #

以下两种配置均可解决问题，选其一即可：

方案1：拦截后端404并转发到index.html #

修改443端口的server块中的location /配置：

server {
    server_name my-website.com;

    location / {
        proxy_pass http://192.168.1.128:5367;
        # 开启拦截后端错误响应
        proxy_intercept_errors on;
        # 当后端返回404时，将请求重定向到后端的/index.html（返回200状态码）
        error_page 404 =200 /index.html;
    }

    listen 443 ssl; # managed by Certbot
    ... # 保留Certbot生成的SSL配置
}

server {
    if ($host = my-website.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name my-website.com;
    listen 80;
    return 404; # managed by Certbot
}

方案2：使用命名location转发非静态资源 #

这种方式更清晰区分静态资源请求和路由请求：

server {
    server_name my-website.com;

    # 优先代理静态资源请求
    location / {
        try_files $uri $uri/ @vue_router_fallback;
    }

    # 所有非静态资源请求转发到后端的index.html
    location @vue_router_fallback {
        proxy_pass http://192.168.1.128:5367/index.html;
    }

    listen 443 ssl; # managed by Certbot
    ... # 保留Certbot生成的SSL配置
}

server {
    if ($host = my-website.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name my-website.com;
    listen 80;
    return 404; # managed by Certbot
}

关键注意事项 #

• 确保后端的静态服务（如serve命令或后端Nginx）已正确托管Vue构建后的dist目录，且index.html可正常访问
• 若使用方案1，proxy_intercept_errors on必须开启，否则Nginx不会拦截后端返回的404响应
• 配置修改后需执行sudo nginx -s reload重新加载Nginx配置

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