当前位置:首页 > 技术文章 > 正文内容

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

arlanguage4个月前 (01-07)技术文章38

将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;
    }
}

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/653.html

标签: nginx 404页面
分享给朋友:

“VUE项目打包发到Docker二次刷新页面报404错误问题解决” 的相关文章

推荐一个Nginx配置文件的网站 nginx配置文件的几大模块

NGINX 不仅仅是一个 Web 服务器。你可能已经知道了。我们喜欢 NGINX,因为:内存使用率低高并发异步事件驱动架构负载均衡反向代理FastCGI 支持缓存 (PHP)静态文件的惊人快速处理使用 SNI 的 TLS/SSL特征:HTTPS、HTTP/2、IPv6、certbot、HSTS、安全...

Nginx 高可用方案

原文链接:https://www.cnblogs.com/SimpleWu/p/11004902.html准备工作192.168.16.128192.168.16.129两台虚拟机。安装好Nginx安装Nginx更新yum源文件:rpm -ivh http://nginx.org/packages/...

Welcome to nginx!

If you see this page, the nginx web server is successfully installed and working. Further configuration is required.For online documentation and suppo...

Nginx笔记

内容介绍 1、nginx基本概念。(1) nginx是什么,能做什么事情(2) 反向代理。(3) 负载均衡。(4) 动静分离2、nginx 安装、常用命令和配置文件(1)在liunx系统中安装nginx.(2) nginx常用命令。(3) nginx 配置文件。3、nginx 配置实例 1-反向代理...

轻松搭建基于 Serverless 的 ThinkPHP 应用

ThinkPHP 是什么?ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级 PHP 开发框架,是为了敏捷 WEB 应用开发和简化企业应用开发而诞生的。ThinkPHP 从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简代码的同时,更注重易用性。遵循 Apache2 开源许可...

【网络安全】关于PHP Study nginx解析高危漏洞的预警通报

网络安全近日,山石网科安全研究院监测发现PHPStudy Windows最新版本存在nginx解析漏洞,可以造成任意代码执行。一、漏洞情况phpStudy是一个PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装...