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

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

从docker内部复制出来的配置文件是这样的,但是刷新页面之后就显示404,关键是我两个前端项目都是用的这一个配置文件,但是只有一个项目出现刷新浏览器显示404的问题,这给我搞懵了!!!

在网上查找问题原因和解决办法,但是大多数都说是资源找不到,让修改配置文件

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

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

xml 复制代码
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的问题,还是那个前端项目出的问题,然后有同事给了一段代码,让贴到配置文件里,然后就又好了!

xml 复制代码
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,*';
}

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

相关推荐
老华带你飞1 分钟前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
YAY_tyy19 分钟前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
東雪蓮☆3 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
m0_748461393 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
珍珠奶茶爱好者4 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy4 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
target酱4 小时前
Docker部署全流程
前端·docker
羊羊小栈5 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star5 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1835 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试