刷新浏览器后，Vue + Docker + Nginx 应用程序给出 404

Question

我使用 nginx 对 Vue 应用程序进行了 Docker 化，并且该应用程序在启动时运行良好。当我刷新页面时出现问题，我在附加的图像中收到 404 错误。我尝试配置我的 nginx.conf 文件，如来自 How to use vue.js with Nginx? 的解决方案，但仍然遇到相同的错误。我将显示我当前的 nginx.conf 文件和 Dockerfile。

错误图片：

nginx.conf 文件：

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;"]