nginx is giving 404 error on page reload of my production vue-cli app - vue.js

Question

I know this is a known problem even explained in vue-cli docs when you use history mode in Vue Router.
If you are using Vue Router in history mode, a simple static file server will fail. For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead.
To fix that, you will need to configure your production server to
fallback to index.html for any requests that do not match a static
file.
But I'm already doing this in my config file and the problem persists when I reload the page manually.
server {
listen 80;
server_name my.domain.name.com;
rewrite ^ https://$server_name$request_uri permanent;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name my.domain.name.com;
root /var/www/my-frontend-dist-root;
location / {
try_files $uri $uri/ /index.html;
}
location ~*.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|ta$
expires 365d;
log_not_found off;
access_log off;
}
access_log /var/log/nginx/my.access.log;
error_log /var/log/nginx/my.error.log debug;
ssl on;
ssl_certificate /etc/letsencrypt/live/my.domain.name/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/my.domain.name/privkey.pem;
keepalive_timeout 60;
ssl_ciphers "ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aN$
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_dhparam /etc/nginx/ssl/dhp-2048.pem;
proxy_buffers 16 64k;
proxy_buffer_size 128k;
}
What am I missing?