Nginx项目部署正常访问，刷新浏览器页面提示404 Not Found

文
章
目
录

• 问题描述
• 问题原因
• 解决办法

问题描述

最近部署了使用了Nginx部署了基于Vue开发的前端项目，基于vue-cli开发的，打成dist后直接部署在nginx中，该项目如果正常登录进入后台点击菜单都能正常访问，但是此时如果刷新浏览器就直接报错404 Not Found。

比如点击链接为http://127.0.0.1/source/flightChute的菜单，页面正常展示，此时再刷新该页面，则404，或者浏览器新建标签打开该链接也直接404。

问题原因

产生该问题的原因就在于nginx配置上面缺少重定向跳转导致的。

解决办法

解决办法也非常简单，只需要打开nginx.conf核心配置文件，新增如下重定向跳转即可：

try_files $uri $uri/ /index.html;

需要注意的是该代码加的位置是在server下的location下

类似如下图：

最后我们再执行nginx重启或重新加载的命令就可以生效了，然后再去直接访问链接或者刷新浏览器都没问题了。