VUE项目打包发到Docker二次刷新页面报404错误问题解决

将VUE项目打包后发布到Docker的Nginx服务器后,基本使用正常,发现前端有一个404错误,但页面显示正常,在退出登录后,跳转到404页面,便这个404页面是nginx缺省的,并不是自己vue项目的,参考网上资料后搞定了此问题,特此记录:

一、原因

刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。
二、Dockerfile文件

注意打包文件拷贝的目标路径,后面的default.conf要一致,否则会有问题

FROM urbgn6za.mirror.aliyuncs.com/library/nginx

MAINTAINER Wu Jize <wujize188@163.com>

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/
#文件拷贝到镜像的目标路径,后面用$uri可以访问到,
COPY dist/  /etc/nginx/html/

三、Nginx配置文件

Nginx启动配置文件是default.conf文件,这个文件要特别注意格式

server {
    listen 8090;
    server_name 192.168.195.17;

    index index.html;
    #charset koi8-r;
    # cross
    #
    location /prod-api/ {
      proxy_pass http://192.168.195.17:8088/;
    }
    # 解决出现404问题
    location / {
        try_files $uri $uri/ @router;
        index index.html index.htm;
    }
    location @router {
      rewrite ^.*$ /index.html break;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root html;
    }
}

相关文章

记一次通过K8S ingress访问业务服务出现404问题

前言本文主要复盘某次协助业务部门排查ingress访问业务报404问题案例模拟复现业务部门ingress配置了https,访问出现因为业务部门的CA证书是买的,理论是不应该出现红色三角形图标。于是查看...

关于解决网站404页面返回200状态码的问题

关于解决网站404页面返回200状态码的问题。当用户访问一个不存在的页面时,网站应该返回404状态码,表示资源未找到。然而,有时候网站可能错误地返回200状态码,这会让搜索引擎误以为页面存在,导致一些...

如何用Nginx设置密码认证(nginx登录验证 自定义页面)

1:安装Apache2-utils软件包:该软件包提供了htpasswd工具,用于管理用户的证书。你可以通过运行以下命令将其安装到你的系统中。sudo apt-get update sudo apt-...

搞定Nginx反向代理,Java和前端从此“听话”了!

嘿,各位奋斗在0和1世界里的兄弟们!今天我们来聊一个让无数后端仔(尤其是Javaer)“又爱又恨”的家伙——Nginx。别一听配置就头大,觉得那是运维大神的专属领域。讲真,在前后端分离的时代,你要是还...

Nginx健康检查模块,生产还能这样配置

Nginx作为生产的公网访问入口,起到负载均衡、分流、限流、安全限制等作用,合理的配置可以在不更改代码、架构的前提下,获得意想不到的收获。本文我们将讨论下Nginx的健康检查模块,通过本文的了解可以知...