vue history模式，刷新页面404？结合nginx配置路由

最新推荐文章于 2025-10-09 18:02:36 发布

原创最新推荐文章于 2025-10-09 18:02:36 发布 · 2.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#nginx #vue.js #前端

本文介绍如何在Vue2的spa应用中，使用history模式避免刷新时404问题。通过Nginx配置尝试文件和index.html重定向，以及前端设置404页面跳转，确保用户在刷新时无缝过渡到预期的路由。

环境：vue2 、nginx

vue history模式，刷新页面404？
出现的场景： spa应用，在history模式下，路由的变更是前端的浏览器 history.pushState、replaceState进行监听切换的，nginx只会配置入口路径进行访问的时候，能正常切换路由，但是进到其他的路由进行刷新的时候，出现了404。
原因： 这是因为我们刷新了当前页面（访问页面相当与发起一个get请求），服务器接收到了，就去查找页面，而服务器只配置了一个首页路由，自然是找不到的。我们不可能每个页面都去服务器配置一下路由。
解决方式： 我们可以在nginx中配置当找不到对应页面的时候，转回首页，这就变向地交给客户端去找路由了，这样本来就存在的路由在刷新的时候就不会再出现404；
只需要在nginx 的.conf文件添加以下配置：

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

上述配置说明：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；
不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转index.html

前端配置404页面：当路由找不到的时候，重定向到我们指定的页面，如下，找不到对应的路由时，重定向为“/”,这个路径是我希望用户跳转到不存在的路由的时候，自动重定向过来的页面。

[
  {
    path: '*',
    redirect: '/'
  },
  {
     path: '/',
    name: 'nft',
    component: ()=> import(/* webpackChunkName: 'nft' */ '@/views/nft/index.vue')
    }
 ]