Vue and Node configuration nginx

Question

I've hosted my first Vue and Node app but I have a problem. I want to load Vue files on diferent port so there is less stress on node. The problem is that with this current configuration I get this in browser: Cannot GET / even though when in Node router I add route with url / I get something. But I need to load this url from vue router not from express router. Why it loads from express ? This is my configuration file nginx:

server {
    listen 80;
    listen [::]:80 default_server;

    return 301 https://$host$request_uri;
}
server {
    # Enable HTTP/2
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name domain.com;

    # Use the Letā€™s Encrypt certificates
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;

    # Include the SSL configuration from cipherli.st
    include snippets/ssl-params.conf;

    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:5000;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
    location / {
        root /var/www/html/Web/dist; // Vue dist folder
    }
}

Answer 1

In your nginx config you need to add try_files $uri $uri/ /index.html; to you / location like so. This sends everything to your index.html file.

location / {
        root /var/www/html/Web/dist; // Vue dist folder
        try_files $uri $uri/ /index.html;
}