After successfully dockerizing a Vue app using nginx, the application runs smoothly upon starting. However, an issue arises when attempting to refresh the page - a 404 error is displayed, as shown in the attached image. Despite trying various configurations to the nginx.conf file based on recommendations from [this Stack Overflow thread](https://stackoverflow.com/questions/47655869/how-to-use-vue-js-with-nginx), the error persists. Below are my current nginx.conf file and Dockerfile.
Error image: https://i.sstatic.net/DpkBQ.png
nginx.conf file:
server {
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}Dockerfile:
# Step 1: Build Vue Project
FROM node:14.15.1 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Step 2: Create Nginx Server
FROM nginx:1.20 AS prod-stage
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]