Vue路由器+反向代理导致500错误或空白页面

Question

我的 nginx 配置如下：

server {
    server_name my-website.com;

    location / {
        proxy_pass http://192.168.1.128:5367;
    }

    listen 443 ssl; # managed by Certbot
    ...
}

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
}

这为带有 vue 路由器的 vue 应用程序提供服务，当我从根访问该网站时工作正常，例如

my-website.com/

。但是，当使用路径访问链接时，例如

my-website.com/companies

vue 路由器似乎损坏并显示空白页面。如何解决这个问题，以便我的网站在通过带有反向代理的 nginx 提供服务时也能正常工作。

按照 vue 路由器页面 (

https://router.vuejs.org/guide/essentials/history-mode.html

) 中的建议添加 try_files $uri $uri/ /index.html; 会导致 500 错误。

Answer 1

问题似乎是

try_files $uri $uri/ /index.html;

和 proxy_pass 不允许出现在同一个块中，因此要修复我需要将它们分开，如下所示：

server {
    server_name my-website.com;

    location / {
        proxy_pass http://192.168.1.128:5367;
        proxy_intercept_errors on;
        error_page 404 = @fallback;
    }

    location @fallback {
        try_files $uri $uri/ /index.html;
    }

    listen 443 ssl; # managed by Certbot
    ...
}

这里我们说，如果出现 404，我们会进入后备块，这会导致加载index.html，从而启用路由机制。