解决前端打包后,部署到生产环境发现除了/的页面能访问,其他路径均显示404

您所在的位置:网站首页 nginx跳转到指定页面 解决前端打包后,部署到生产环境发现除了/的页面能访问,其他路径均显示404

解决前端打包后,部署到生产环境发现除了/的页面能访问,其他路径均显示404

2023-06-08 17:20| 来源: 网络整理| 查看: 265

今天要来分享一个前端开发的故事,它就像是一场充满迷宫和令人头疼的冒险。让我们一起踏上这段奇幻之旅,探索404错误的起因、经过和最终的终极解决方案。

起因 一天,我开发了一个前端React应用,并为它准备好了部署到生产环境的资料。满怀喜悦,我迫不及待地将应用部署到服务器上。然而,当我访问除了根路径的页面,如"/work"或者"/login"时,却遭遇了令人沮丧的404错误页面。这一幕简直像是一个恶作剧,让我倍感困惑。

经过 首先,我检查了服务器的配置,想确定是否有问题。

经过一番搜索和思考,我意识到这可能是由于前端路由的问题。React应用使用了前端路由(React Router),但是服务器并没有正确地配置来支持它。我需要告诉服务器,不论访问什么路径,都将请求交给React应用来处理。

于是,我在nginx配置中添加了一些魔法咒语:

location / { try_files $uri $uri/ /index.html; }

这样一来,无论是根路径还是其他路径,都会被重定向到index.html,并由前端路由来接管。

结果 终于,我再次访问"/work"和"/login",这一次,404错误消失得无影无踪!前端应用恢复了正常运行,而我也松了一口气。这段艰辛的奇幻之旅告诉我一个重要的教训:在部署React应用时,不仅要关注根路径,还要确保其他路径能够正确地被前端路由处理。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3