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

【问题标题】：Vue + Docker + Nginx app is giving 404 after refreshing the browserVue + Docker + Nginx 应用程序在刷新浏览器后给出 404
【发布时间】：2021-06-01 15:23:29
【问题描述】：

我使用 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;"]

【问题讨论】：

标签： javascript docker vue.js nginx nginx-config

【解决方案1】：

我遇到了同样的问题。我在这里找到了答案https://stackoverflow.com/a/54193517/7923299。将此添加到您的 Dockerfile 中

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

【讨论】：