这是一个创建于 2115 天前的主题，其中的信息可能已经有所发展或是发生改变。
我在一个 Vue 项目中构建了一个错误页面，它的效果类似于访问 http://server_name/error/500 会让 vue-router 将 router-view 的内容变更为「服务器内部错误」的这种错误提示。
现在需要将这个项目部署到服务器上，问题来了：如何让 Nginx 跳转到这个错误页面上来呢（保证浏览器中 URL 不变）？查了一些资料，试了下 rewrite，但是由于这个错误页面并不是静态的，所以没有办法通过 rewrite 来实现。
第 1 条附言 · 2019-01-30 17:38:53 +08:00
这个问题异常复杂的关键在于 vue-router 会修改 URL，所以常规方法都不太行…
 |
1
qyxx 2019-01-30 17:41:55 +08:00
error_page 404 /404.html;
|
 |
2
oott123 2019-01-30 17:43:56 +08:00 via Android  1
没办法，自己编译一个单独的静态页放着
|
 |
5
vsomeone OP @qyxx 抱歉，可能是我没表述清楚，我的这个错误页面是通过一个 Vue component 实现的，这个 component 内显示的内容是根据 url 变化的 (vue-router 中体现为 /error/:code)，不是一个静态的页面。
|
 |
7
keepeye 2019-01-30 18:35:54 +08:00
很奇怪为什么要通过 nginx ？ spa 你不是去请求后端接口吗？根据返回的错误码显示你那个 component 就是了吧
|
|
8
vsomeone OP @Outshine 可以倒是可以，但是用户体验不太好，因为浏览器 URL 变成了 /error/:code，刷新还会是显示错误页面，而不会是重新尝试 request
|
 |
10
mgso 2019-01-30 18:47:41 +08:00 via iPhone
@keepeye 正解！既然是一个 component 也有路由，捕获到了错误后直接跳转到对应的理由上。在什么 axios 里做一个全局响应拦截，判断出错了就直接 router.push 到 500 或者其他什么错误页面
|
|
11
mgso 2019-01-30 18:50:59 +08:00 via iPhone
@vsomeone 那么可以在 app.vue 里 隐藏一个错误提示的 div 区域。如果出现错误了 router-view 里的内容隐藏，同时显示这个 div 区域的内容
|
|
12
vsomeone OP @mgso 也可以，其实我问这个问题主要想给前端服务器 500 做个提示[捂脸]，不过看样子是没办法实现了
|
 |
15
binaryify 2019-01-30 19:17:03 +08:00
nginx 返回 index.html/500 就行了吧,前端路由再写个 500 的页面
|
Select Language