nginx配置之部署后刷新产生404错误的解决
更新时间：2026年02月11日 09:15:43 作者：monimonicaca
文章总结：在前端部署过程中遇到浏览器刷新出现nginx_error的问题,通过配置nginx.conf文件中的try_files指令来解决,针对单页面应用的逻辑问题,确保登录页面的逻辑正确处理会话存储中的token,以避免页面刷新后回到登录页面的情况
在这里记录一下前端部署过程中，遇到的浏览器刷新出现的nginx_error问题。
将前端部署到服务器上之后，页面之间可以相互跳转，但是只要一点击浏览器刷新页面之后就会出现红红的大大的nginx_error。
一、配置nginx
在网上查找资料之后在nginx.conf上配置了try_files $uri $uri/ /index.html；这样配置之后浏览器刷新之后如果没找到目标页面就会重新定位到index.html页面。
二、注意页面之间的逻辑
虽然这样配置了之后不会出现nginx_error，但是每次刷新都会回到登录页面。
原因是vite创造的vue项目默认是单页面的，同时我对于路径IP：/重定位到了登录页面，所以每次都会重新回到登陆页面。
如果想要去到其他页面则需调整项目结构，而且可能需要引入插件，调整完之后还要配置nginx。
如果想在不改变页面结构的情况下，实现浏览器刷新不出错，就需要写好不同页面之间的逻辑。
我对项目比较简单，所以只用注意登陆页面的逻辑，如果会话存储中token存在则直接定位到首页，这样就不会出现一刷新就回到登录页面的情况啦。
但是这里需要提醒一下：
不要用pinia来存储token，可能是需要配置，欢迎大佬指导。
要用sessionStorage.setItem来存储token，不然读取不到token，导致一刷新就回到登录页面。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Nginx学习之如何搭建文件防盗链服务的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
nginx利用信号处理机制,可以捕获和处理各种信号,本文主要介绍了nginx中的signal处理机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
国内机房一般都要求网站主关闭空主机头，防止未备案的域名指向过来造成麻烦2012-09-09
安全起见,需要将之前的http接口访问变成https访问,所以需要配置SSL证书,本文主要介绍了nginx配置ssl实现https访问,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
在Windows下使用Nginx，我们需要掌握一些基本的操作命令，今天为大家分享几个Windows下操作Nginx的基本命令2018-10-10
本篇文章主要介绍了nginx服务器http重定向到https的正确写法 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了关于Nginx动静分离详解以及配置,动静分离是通过中间件将动态请求和静态请求进行分离，分离资源，减少不必要的请求消耗，减少请求延时,需要的朋友可以参考下2023-04-04
本文详细讲解了在云服务器使用宝塔搭建Python环境，运行django程序的方法。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-12
默认后端服务器只能看到是前端nginx调度器访问的本机,本文主要介绍了nginx实现IP地址透传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
本文介绍了Nginx实现域名跳转的几种常用方式,包括301永久重定向,302临时重定向,HTTPS强制跳转,正则匹配跳转,具有一定的参考价值,感兴趣的可以了解一下2026-01-01
最新评论