使用vuejs重新加载页面时出现404 nginx错误答案

【问题标题】：404 nginx error on page reload with vuejs使用vuejs重新加载页面时出现404 nginx错误
【发布时间】：2022-12-14 12:46:09
【问题描述】：

我已经在这里问过这个问题：How to use vue.js with Nginx? 但尝试解决方案并没有解决我的问题。

因此，当我构建我的Dockerfile 并转到localhost:8080 时，它可以正常工作（重新加载页面也可以）。当我导航到另一个页面时，假设 localhost:8080/add_app 它第一次显示该页面。但是当我重新加载时出现错误：

码头桌面错误：

这是我的Dockerfile：

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY ./platform-frontend/package*.json ./
RUN npm install
COPY ./platform-frontend .
RUN npm run build

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

这是我的nginx.conf 文件：

server {
    listen      80;
    server_name localhost;   
        
    location / {
        root /app/dist;
        index   index.html index.html;
        try_files $uri /index.html;
    }    
}

我的项目结构：

【问题讨论】：

标签： docker vue.js nginx

【解决方案1】：

我使用来自 https://github.com/vuejs/v2.vuejs.org/issues/2818 的 maximkrouk 的以下解决方案解决了这个问题

【讨论】：