Netlify部署vue/react项目,在页面刷新时呈现404解决办法

Netlify 是一个静态网站托管平台,它非常适合用于托管使用 React 和其他前端框架构建的单页应用程序(SPA)。React Router 是 React 的路由库,用于在 SPA 中管理不同页面的导航。

问题描述

在使用 React 或者Vue 构建的项目中,当用户刷新页面时,可能会遇到 404 错误。这是因为 Netlify 默认情况下不知道如何处理前端路由,导致无法找到对应的资源。

原因分析

前端路由与服务器路由的区别:在 SPA 中,所有的路由都是由前端 JavaScript 处理的,而不是由服务器处理。当用户刷新页面时,浏览器会向服务器请求对应的资源,而服务器并不知道这个资源是由前端路由处理的,因此返回 404 错误。
Netlify 的默认行为:Netlify 默认情况下会将所有请求都指向 index.html 文件,但如果没有正确配置,服务器可能无法正确处理前端路由。

于是,要做的事情就是: 告诉Netlify, 管它三七二十一,不管访问什么路径你都给我返回index.html——即,让js代码先下到用户的浏览器上,让它去处理该显示什么。

解决办法

在项目根目录创建文件netlify.toml,内容如下:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

到netlify看一下部署的进度,等部署完成后就可以看到效果来,刷新就不是404了:

再次刷新就好了:

例如我的网站:PakePlus

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值