在这里记录一下前端部署过程中,遇到的浏览器刷新出现的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,导致一刷新就回到登录页面。