nginx配置:部署后刷新产生404错误

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

当你将Vite项目部署Nginx服务器并遇到页面刷新404错误时,这通常是因为Nginx配置未正确设置动态内容路径或者是Vite的静态文件URL处理不当。以下是可能的原因和解决步骤: 1. **Vue单页应用配置**: - Vite默认生成的是静态站点,所以你需要告诉Nginx如何解析动态请求。检查你的`nginx.conf`中的`try_files`指令,应该指向你的Vite构建后的目录,例如: ```bash location / { try_files $uri $uri/ /index.html =404; } ``` 2. **Vite devServer的部署模式**: - 如果你使用了Vite的`--preview`或`--host`选项部署到本地,需要确保Nginx正确转发请求。确保Vite devServer的`host`设置与Nginx监听的地址一致。 3. **Nginx代理配置**: - 如果你的应用运行在非根路径(如"/app"),你需要添加反向代理规则。例如: ```nginx server { listen 80; location /app { proxy_pass http://localhost:3000; # Vite devServer端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 4. **检查URL重写规则**: - 检查是否有不必要的URL重写,确保浏览器访问的URL可以直接匹配到Vite项目的资源。 5. **清除缓存**: - 清除浏览器缓存,并尝试通过控制台的开发者工具查看网络请求是否正确。 如果以上步骤都确认无误,还是存在问题,试着提供更多的上下文信息以便更精确地定位问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值