使用Docker+Nginx部署的Vue应用刷新浏览器后出现404错误如何解决

问题原因 #

你编写的自定义nginx.conf没有实际生效。当前Dockerfile仅将Vue构建产物复制到了Nginx静态资源目录，没有替换容器内Nginx的默认配置，容器运行时仍使用原生Nginx配置，没有适配Vue history路由模式的 fallback 规则，因此直接访问嵌套路由或刷新页面时会触发404。

修复步骤 #

• 确认你编写的nginx.conf文件存放于项目根目录，和Dockerfile处于同级路径
• 修改Dockerfile，在Nginx构建阶段增加配置文件复制逻辑，修改后的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
# 新增这行：将自定义nginx.conf替换容器内默认的站点配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

额外验证点 #

• 若你的Vue应用部署在子路径下，需要同时修改nginx.conf的try_files规则、Vue路由的base参数，以及vue.config.js的publicPath配置保持一致
• 容器启动后可以执行docker exec <容器ID> cat /etc/nginx/conf.d/default.conf确认自定义配置是否已经正确覆盖
• 若你不想修改Nginx配置，也可以将Vue路由从history模式切换为hash模式，刷新404问题也会自动解决

内容的提问来源于stack exchange，提问作者Valentine Sean