My Issue

I've read through the official documentation for putting VueJS router in history mode behind Nginx as well as the following:

Stackoverflow - vue-router, nginx and direct link

Stackoverflow - How to config nginx for Vue-router on Docker

After reviewing all these and making the changes multiple times, I'm still unable to provide a direct link to my routes and have them load properly (aka, I get a 404 for anything but /).

My Environment

I'm creating an nginx docker image (nginx:alpine) and having it serve the static VueJS files.

My Configuration

Dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY . .
RUN npm install && npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY prod_nginx.conf /etc/nginx/nginx.confg
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx Config

Nginx Version: 1.16.1

user                    nginx;
worker_processes        1;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
events {
    worker_connections  1024;
}

http {
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    log_format          main '$remote_addr - $remote_user [$time_local] "$request" '
                             '$status $body_bytes_sent "$http_referer"'
                             '"$http_user_agent" "$http_x_forwarded_for"';
    access_log          /var/log/nginx/access.log main;
    sendfile            on;
    keepalive_timeout   65;
    server {
        listen          80;
        server_name     _ default_server;
        index           index.html;
        location / {
            root        /usr/share/nginx/html;
            index       index.html;
            try_files   $uri $uri/ /index.html;
        }
    }
}