docker使用nginx部署vue刷新页面404

news/2024/6/18 0:53:15 标签: docker, nginx, vue.js

dockernginxvue404_0">docker使用nginx部署vue刷新页面404

docker内部复制出来的配置文件是这样的,但是刷新页面之后就显示404,关键是我两个前端项目都是用的这一个配置文件,但是只有一个项目出现刷新浏览器显示404的问题,这给我搞懵了!!!
在这里插入图片描述
在网上查找问题原因和解决办法,但是大多数都说是资源找不到,让修改配置文件

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

下面是配置文件的代码,改完之后果然就好了,两个前端刷新之后都没事了,

worker_processes auto;

events {
    worker_connections 1024;
}

http {
 include             mime.types;

 default_type        application/octet-stream;

 sendfile            on;

 keepalive_timeout 65;

 client_max_body_size 20m;

    server {
        listen       80;
        server_name  localhost;
        location / {
			root /usr/share/nginx/html; #配置Vue项目根路径
			index index.html index.html; #配置首页
			try_files $uri $uri/ /index.html; #防止刷新报404
        }

        #error_page 404 /404.html;
            #location = /40x.html {
        #}

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
			root html;
        }
    }
 }

还有就是在windows上刷新也显示404的问题,还是那个前端项目出的问题,然后有同事给了一段代码,让贴到配置文件里,然后就又好了!

location / {
    root   html;
    index  index.html;
 	try_files $uri $uri/ /index.html;
    autoindex on;       		#开启nginx目录浏览功能            
    autoindex_exact_size off;   #文件大小从KB开始显示            
	charset utf-8;          	#显示中文            
	add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址           
	add_header 'Access-Control-Allow-Credentials' 'true';           
	add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式           
	add_header 'Access-Control-Allow-Headers' 'Content-Type,*';			
	add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
}

这里只记录一下,感兴趣的自己查查!


http://www.niftyadmin.cn/n/5331694.html

相关文章

XXL-Job的搭建接入Springboot项目(详细)

一、XXL-Job介绍 XXL-Job 是一款开源的分布式任务调度平台,由 Xuxueli(徐雪里)开发。它基于 Java 技术栈,提供了一套简单易用、高可靠性的任务调度解决方案。 XXL-Job 的主要作用是帮助开发者实现定时任务的调度和执行。它可以用…

qemu、virt-manager克隆虚拟机

前提 必须先关闭虚拟机,不然克隆按钮是灰的,不能点击 克隆虚拟机 选择虚拟机--克隆 点击克隆 等待完成克隆 下图说明已经克隆成功 运行虚拟机

【应用方案】基于MT7628 JN5169 和SUN724的4G-Zigbee智能网关方案

产品方案特性 - 4G-Zigbee智能网关扩展性强; - 百兆以太网接入; - 支持Zigbee 3.0智能家居产品和智能安防产品接入; - 实时检测烟感、气感,联动阀门控制器可自动关闭燃气阀门,并拨打报警电话,防止火灾&…

软件开发架构

【 一 】软件开发架构图 【 1】ATM和选课系统 三层的开发架构 前段展示台 后端逻辑层 数据处理层 【二】软件开发架构的步骤流程 需求分析:在软件开发架构设计之前,需要对应用系统进行需求分析,明确用户需求、功能模块、业务流程等内容。…

Angular系列教程之父子组件通信详解

文章目录 前言组件通信方法1. 输入属性(Input Properties)2. 输出属性(Output Properties)3. 服务(Services)4. ViewChild与ContentChild 示例代码说明结论 前言 在Angular应用程序开发中,父子…

【Docker基础五】Dockerfile指令

Dockerfile 是一个文本文件&#xff0c;它包含了一系列的指令和参数&#xff0c;用来自动化构建 Docker 镜像的过程。每一个指令通常都会创建镜像的一层。下面是一些常用的 Dockerfile 指令。 1、FROM 语法&#xff1a;FROM <image>[:<tag>] [AS <name>]用…

linux-nfc neard 编译与安装

项目github地址&#xff1a; https://github.com/linux-nfc/neard git clone地址&#xff1a; https://github.com/linux-nfc/neard.git clone完源码切换到目录neard里。这个项目需要依赖一下库&#xff1a; - GCC compiler - D-Bus library - GLib library - Netlink (lib…

基于Xilinx K7-410T的高速DAC之AD9129开发笔记(二)

引言&#xff1a;上一篇文章我们简单介绍了AD9129的基础知识&#xff0c;包括芯片的重要特性&#xff0c;外部接口相关的信号特性等。本篇我们重点介绍下项目中FPGA与AD9129互联的原理图设计&#xff0c;包括LVDS IO接口设计、时钟电路以、供电设计以及PCB设计。 LVDS数据接口设…