Vue and Node configuration nginx - node.js

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