Vue3项目部署到服务器后,部分url(带有restful风格参数的url),当刷新页面时会报404(本地白屏,服务器404)问题解决过程
一开始本地出现这个问题的时候,我以为是restful风格的参数被识别成了url导致的。想了很久,想着,就算被识别成这样了,那应该也有重试机制可以跳转啊,那为什么还是会白屏呢?于是开始翻阅资料,牵心万苦后终于发现,是由于vue代码中的配置导致的:publicPath:’./’。看到这里我终于恍然大悟,这个配置的意思是从当前路径找资源,所以一开始进去或者刷新页面是可以的,但如果带参数的url访问时,由
一开始本地出现这个问题的时候,我以为是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)