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

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,*';
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/325612.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一些面试会问到的奇怪问题与面试总结

1.v-for、v-if先后顺序。 官方不建议一起使用,但是有时候面试的时候会问到。 在vue2中是v-for先与v-if的。 源码js编译结果: _c()就是vm.$createElement(),意思是创建一个虚拟的element,就是返回值是VNode。 _l就是renderlist…

关于java创建对象内存分析

关于java创建对象内存分析 我们在前面的文章中,了解了类和对象,以及创建对象,给对象赋值等,我们本篇文章来进一步了解一下创建对象的时候,堆和栈的情况,以及对内存的分析😀 1、创建一个类 我…

虚拟机连接(与主机断开连接)U盘的按钮为灰色之解决方法

在WIN11中,虚拟机“连接(与主机断开连接)U盘”选项为灰色,解决方法如下: 1、关闭虚拟机电源,得到下面的界面: 2、根据上述提示,找到虚拟机所在磁盘 3、配置文件属性见下图: 4、使用记事本打开…

【深度学习:Synthetic Training Data 】合成训练数据简介

【深度学习:Synthetic Training Data 】合成训练数据简介 计算机视觉模型的视频标签视频注释与图像注释‍Data 数据‍Annotation process ‍标注流程‍Accuracy 准确性 ‍注释视频的优点易于数据收集时间背景实用功能 视频注释用例自动驾驶汽车姿态估计交通监控医学…

Python源码26:海龟画图turtle画向日葵

---------------turtle源码集合--------------- Python教程43:海龟画图turtle画小樱魔法阵 Python教程42:海龟画图turtle画海绵宝宝 Python教程41:海龟画图turtle画蜡笔小新 Python教程40:使用turtle画一只杰瑞 Python教程39…

KT148A语音芯片智能锁扩展语音地址以及如何支持大量小文件的打包

一、语音芯片应用于智能锁的需求 智能锁的语音播放需求中,有很多需要多国语言合并在一起的需求 其中语音文件数多,并且每个语音文件小的特点 如果使用OTP的语音芯片,就很麻烦,因为用户不可烧录,调试也很繁琐 同时大…

Java 开源扫雷游戏 JMine 发布新版 3.0 及介绍视频

Java 开源扫雷游戏 JMine 发布新版 3.0 及介绍视频 Java 开源扫雷游戏 JMine 是笔者开发的基于 Swing 的 Java 扫雷游戏,现已发布新版 3.0 及其介绍视频。视频请见: https://www.bilibili.com/video/BV1RK4y1z7Qz/ 老版本 JMine 1.2.5 的介绍视频请见…

跨越数字化鸿沟:企业转型的领导力与执行力,数字化转型浪潮下创新、变革与持续发展

在数字化转型的浪潮下,企业面临着巨大的机遇与挑战。如何成功跨越数字化鸿沟,实现转型发展,是企业领导者必须深思的问题。领导力、执行力与创新、变革、持续发展之间的关系成为关键。本文将深入探讨这些因素如何共同作用,帮助企业…

GZ075 云计算应用赛题第10套

2023年全国职业院校技能大赛(高职组) “云计算应用”赛项赛卷10 某企业根据自身业务需求,实施数字化转型,规划和建设数字化平台,平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”,拟采用开源OpenS…

[java数据结构] ArrayList和LinkedList介绍与使用

目录 (一) 线性表 (二) ArrayList 1. ArrayList的介绍 2. ArrayList的常见方法和使用 3. ArrayList的遍历 4. ArrayList的模拟实现 5. ArrayList的优缺点 (三) LinkedList 1. LinkedList的介绍 2. LinkedList的常见方法和使用 3. LinkedList的遍历 4. LinkedList的…

上门按摩APP系统公众号H5搭建能为客户带来哪些便捷。

大家好!今天我来给大家介绍一下上门按摩系统H5搭建。你有没有曾经因为工作疲劳、肌肉酸痛而感到身体不适?或者是因为长时间坐在电脑前,感觉脖子和肩膀快要僵硬了?如果你有这样的困扰,那么上门按摩系统公众号绝对是你的…

黑马程序员——javase基础——day01——Java入门IDEA基础语法

目录: Java入门 Java简介JDK的下载和安装第一个程序常见问题常用DOS命令Path环境变量IDEA IDEA概述和安装IDEA中HelloWorldIDEA中基本配置&注释IDEA中常用快捷键IDEA中模块操作基础语法 字面量数据类型变量变量的案例 手机信息描述疫情防控信息采集表变量的注意…

linux云服务器 如何将数据盘挂载到系统盘上面?

先认识认识下面几个常用命令 lsblk 命令:查看设备列表,也就是能看到系统盘和数据盘一般为:vda(系统盘)、vdb(数据盘)等等 lsblk"ls" 是 "list" 的缩写: lsblk…

29K star!关于shell,你需要的都在这里

Awesome 是GitHub上一个神奇的单词,搜索Awesome可以发现非常多精彩的汇总性项目,涉及到各种方面,而且star都非常多。 今天我们推荐的开源项目帮你整理了玩转shell所需的一切,本项目目前在GitHub已超过29K Star,它就是…

Go后端开发 -- 数组 slice map range

Go后端开发 – 数组 && slice && map && range 文章目录 Go后端开发 -- 数组 && slice && map && range一、数组1.数组的声明和初始化2.数组的传参 二、slice切片1.slice的定义和初始化2.len()和cap()函数3.空切片4.切片截取5…

新书速览|数据科学技术:文本分析和知识图谱

百分科技书解数据科学,文本分析、知识图谱详解,实战案例呈现,助你深入理解技术原理,行业应用启发,助力创新发展。 本书内容 数据科学的关键技术包括数据存储计算、数据治理、结构化数据分析、语音分析、视觉分析、文本…

牛客周赛 Round 5 解题报告 | 珂学家 | 思维场

前言 剑,和茶一样,只有细细品味,才能理解它的风雅。 整体评价 挺难的一场比赛,C题差点点错科技树(想着用Dsu On Tree), D题开始上难度,但是只是分析其实就是一个区间求交集的脑筋急转弯,E题盲猜是菊花图。…

Ansys Zemax | 如何使用光学制造全息图修正像差

附件下载 联系工作人员获取附件 本文介绍了利用光学全息图降低单透镜像差的方法。在描述了表示全息图构造光束的两个 ZMX 文件之后,本文演示了如何在重现文件中设置 OFH。然后解释了如何轻松地从重现文件中访问任何结构造光束变量,以实现衍射受限单透镜…

【分享】我发布的视频教程列表

为了方便大家的观看,我将已经发布的视频列表进行了整理,大家可以按照自己习惯的网站进行访问。 My Key Published Videos Series | video_published 同时,这个列表会随时更新,大家可以在进度条上了解上传的比例。 欢迎大家提出…

动态路由协议

文章目录 一、动态路由协议二、管理距离(Administrative Distance)三、静态路由四、环回接口五、缺省路由(默认路由)六、动态路由协议,RIP距离矢量路由协议RIP解决环路问题的机制RIP配置RIP案例1RIPV2的路由汇总 一、动…