Nginx 如何重定向到 Vue SPA 的错误页面？

[vsomeone]

我在一个 Vue 项目中构建了一个错误页面，它的效果类似于访问 http://server_name/error/500 会让 vue-router 将 router-view 的内容变更为「服务器内部错误」的这种错误提示。

现在需要将这个项目部署到服务器上，问题来了：如何让 Nginx 跳转到这个错误页面上来呢（保证浏览器中 URL 不变）？查了一些资料，试了下 rewrite，但是由于这个错误页面并不是静态的，所以没有办法通过 rewrite 来实现。

[qyxx]

error_page 404 /404.html;

[oott123]

没办法，自己编译一个单独的静态页放着

[vsomeone]

@oott123 看来得考虑迁移到 Nuxt.js …

[qyxx]

@vsomeone 请先尝试我 1 楼发的那句。

[vsomeone]

@qyxx 抱歉，可能是我没表述清楚，我的这个错误页面是通过一个 Vue component 实现的，这个 component 内显示的内容是根据 url 变化的 (vue-router 中体现为 /error/:code)，不是一个静态的页面。

[Outshine]

@vsomeone 所以你 nginx 重定向到 /error/500 也不行？

[keepeye]

很奇怪为什么要通过 nginx ？ spa 你不是去请求后端接口吗？根据返回的错误码显示你那个 component 就是了吧

[vsomeone]

@Outshine 可以倒是可以，但是用户体验不太好，因为浏览器 URL 变成了 /error/:code，刷新还会是显示错误页面，而不会是重新尝试 request

[vsomeone]

@keepeye 原因与 #8 类似…

[mgso]

@keepeye 正解！既然是一个 component 也有路由，捕获到了错误后直接跳转到对应的理由上。在什么 axios 里做一个全局响应拦截，判断出错了就直接 router.push 到 500 或者其他什么错误页面

[mgso]

@vsomeone 那么可以在 app.vue 里 隐藏一个错误提示的 div 区域。如果出现错误了 router-view 里的内容隐藏，同时显示这个 div 区域的内容

[vsomeone]

@mgso 也可以，其实我问这个问题主要想给前端服务器 500 做个提示[捂脸]，不过看样子是没办法实现了

[mgso]

@vsomeone 把这个方法写好 然后作为前端框架的基础配置 以后就是万金油了 手动滑稽

[qyxx]

@vsomeone 所以你试过了吗？

[binaryify]

nginx 返回 index.html/500 就行了吧,前端路由再写个 500 的页面