Vue router + Reverse proxy result into 500 error or blank page

Question

I have my nginx configured as following:

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
}

This serves a vue app with vue router and works fine when I visit the website from the root e.g. my-website.com/. However when visiting the link using a path e.g. my-website.com/companies vue router seems to break and showing a blank page. How to solve this so my website also works fine when serving it through nginx with reverse proxy.

Adding the try_files $uri $uri/ /index.html; as suggested in the vue router page (https://router.vuejs.org/guide/essentials/history-mode.html) results in a 500 error.

Answer 1

The issue seemed to be that try_files $uri $uri/ /index.html; and proxy_pass are not allowed in the same block so to fix I needed to separate them as following:

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
    ...
}

Here we say that if we have a 404 we go the fallback block which results in loading the index.html and thus enabling the routing mechanism.