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

Question

我使用 nginx 对 Vue 应用程序进行了 docker 化，该应用程序启动后运行良好。当我刷新页面时，问题出现了，我在附加的图像中收到 404 错误。我尝试像 How to use vue.js with Nginx? 中的解决方案一样配置我的 nginx.conf 文件仍然得到同样的错误。我将显示我当前的 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;"]

Answer 1

我也遇到了同样的问题。我在这里找到了答案https://stackoverflow.com/a/54193517/7923299 。将其添加到您的 Dockerfile 并替换 [your_nginx_file.conf]

# Add nginx config
COPY [your_nginx_file.conf] /temp/prod.conf
RUN envsubst /app < /temp/prod.conf > /etc/nginx/conf.d/default.conf