环境: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')
}
]