当前位置: 首页 > article >正文

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


http://www.kler.cn/a/584926.html

相关文章:

  • Java常见文件操作及分块传输
  • CI/CD—GitLab钩子触发Jenkins自动构建项目
  • 某银行 U位资产管理系统安全合规整改项目案例及分析
  • Penguins“Collect to Earn”新标杆,开启Web3.0与AI融合未来
  • kkFileView文件预览组件部署说明
  • Trae与Builder模式初体验
  • 基于异构特征融合与轻量级集成学习的软件漏洞挖掘方案设计与Python实现
  • maxkb安装部署
  • Zookeeper与Kafka学习笔记
  • 面试高频#LeetCode#Hot100-字母异位词分组
  • docker拉取 sentinel 并启动
  • 技术聚焦:Debezium 如何将数据库数据精准注入 Kafka
  • 探索移动端开发新可能: Android Termux环境下部署MariaDB数据库
  • 智慧锂电:开启能源新时代的钥匙
  • Web网页制作之爱家居的设计(静态网页)
  • springboot3 webflux
  • 前端构建工具进化论:从Grunt到Turbopack的十年征程
  • ChromeOS 133 版本更新
  • 游戏引擎学习第156天
  • Manus 超强开源版本,OpenManus + QwQ-32B 实现 AI Agent