Vue3项目部署到服务器后,部分url(带有restful风格参数的url),当刷新页面时会报404(本地白屏,服务器404)问题解决过程

在这里插入图片描述

一开始本地出现这个问题的时候,我以为是restful风格的参数被识别成了url导致的。

想了很久,想着,就算被识别成这样了,那应该也有重试机制可以跳转啊,那为什么还是会白屏呢?
于是开始翻阅资料,牵心万苦后终于发现,是由于vue代码中的配置导致的:publicPath:’./’。

看到这里我终于恍然大悟,这个配置的意思是从当前路径找资源,所以一开始进去或者刷新页面是可以的,但如果带参数的url访问时,由于参数被识别成了url,所以url并不存在,就需要去当前目录找,但当前目录本就不存在,所以404。

将配置改成publicPath:’/'即可解决问题。

就在我以为问题已经解决时,服务器上的项目仍有这个问题!!!
在这里插入图片描述

于是乎又开始了漫长的找bug阶段,会不会是nginx配置也有问题? 因为是刷新页面才会出现问题,于是我将问题点定位在了nginx的try file上。可不管怎么尝试,始终不行,于是我想到了之前学到的try file原理,这是我的配置:

try_files $uri $uri/ /index.html;

我想,既然uri 和 uri/ 都找不到,那么最后应该会跳转到index主页才对啊,为什么没有跳转这一步呢?
于是我将 index.html替换成404 ,看看是否会报404错误,结果可想而知,并没有什么变化。

try file配置没有生效!!!

为什么没有生效? 于是我又去翻阅资料,良久后发现,应该是没错的,可为什么呢?
难道是代码问题?这个时候,路都堵死了,当然是要学会去问大佬,于是我开始了提问的过程,可就在截图的过程中,灵光乍现!

我想到了一个关键点,由于出问题的前端url和后端api部分重合,所以会不会是nginx将前端url识别成了后端api导致的? 一番严谨的验证后,果然如此啊!!!! 泪目了~
于是我将后端的前缀稍加改变,问题解决!!! 在此记录心酸历程`~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值