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 $remote_addr和$proxy_add_x_forwarded_for变量的实现
本文主要介绍了Nginx $remote_addr和$proxy_add_x_forwarded_for变量的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
这篇文章主要介绍了Nginx提高安全与性能的最好配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
本文主要介绍了Nginx启动不了原因解决(端口占用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了nginx中root和alias指令的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
负载均衡用于从“upstream”模块定义的后端服务器列表中选取一台服务器接受用户的请求,下面这篇文章主要给大家介绍了关于使用nginx进行负载均衡的搭建全过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Nginx进行域名重写和泛域名解析配置的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下2025-07-07
Nginx绑定多个域名，可通过把多个域名规则写一个配置文件里实现，也可通过分别建立多个域名配置文件实现，为了管理方便，建议每个域名建一个文件，有些同类域名则可写在一个总的配置文件里。下面这篇文章就来详细看看nginx多域名配置的方法，有需要的朋友们可以参考。2016-12-12
本文基于一次生产环境中的实际案例,详细解析了Nginx代理配置不当导致HTTPS访问下前端资源加载失败的问题,通过日志分析、参数调优和原理说明,为开发者提供完整的排查思路与解决方案,需要的朋友可以参考下2025-12-12
nginx不单可以作为强大的web服务器，也可以作为一个反向代理服务器，而且nginx还可以按照调度规则实现动态、静态页面的分离，可以按照轮询、ip哈希、URL哈希、权重等多种方式对后端服务器做负载均衡，同时还支持后端服务器的健康检查2016-09-09
最新评论