V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
NGINX
NGINX Trac
3rd Party Modules
Security Advisories
CHANGES
OpenResty
ngx_lua
Tengine
在线学习资源
NGINX 开发从入门到精通
NGINX Modules
ngx_echo
vsomeone
V2EX  ›  NGINX

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

  •  
  •   vsomeone · 2019-01-30 17:01:30 +08:00 · 3279 次点击
    这是一个创建于 1885 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    第 1 条附言  ·  2019-01-30 17:38:53 +08:00
    这个问题异常复杂的关键在于 vue-router 会修改 URL,所以常规方法都不太行…
    15 条回复    2019-01-30 19:17:03 +08:00
    qyxx
        1
    qyxx  
       2019-01-30 17:41:55 +08:00
    error_page 404 /404.html;
    oott123
        2
    oott123  
       2019-01-30 17:43:56 +08:00 via Android   ❤️ 1
    没办法,自己编译一个单独的静态页放着
    vsomeone
        3
    vsomeone  
    OP
       2019-01-30 17:53:52 +08:00
    @oott123 看来得考虑迁移到 Nuxt.js …
    qyxx
        4
    qyxx  
       2019-01-30 18:08:22 +08:00
    @vsomeone 请先尝试我 1 楼发的那句。
    vsomeone
        5
    vsomeone  
    OP
       2019-01-30 18:16:12 +08:00
    @qyxx 抱歉,可能是我没表述清楚,我的这个错误页面是通过一个 Vue component 实现的,这个 component 内显示的内容是根据 url 变化的 (vue-router 中体现为 /error/:code),不是一个静态的页面。
    Outshine
        6
    Outshine  
       2019-01-30 18:26:22 +08:00
    @vsomeone 所以你 nginx 重定向到 /error/500 也不行?
    keepeye
        7
    keepeye  
       2019-01-30 18:35:54 +08:00
    很奇怪为什么要通过 nginx ? spa 你不是去请求后端接口吗?根据返回的错误码显示你那个 component 就是了吧
    vsomeone
        8
    vsomeone  
    OP
       2019-01-30 18:44:22 +08:00 via iPhone
    @Outshine 可以倒是可以,但是用户体验不太好,因为浏览器 URL 变成了 /error/:code,刷新还会是显示错误页面,而不会是重新尝试 request
    vsomeone
        9
    vsomeone  
    OP
       2019-01-30 18:45:47 +08:00 via iPhone
    @keepeye 原因与 #8 类似…
    mgso
        10
    mgso  
       2019-01-30 18:47:41 +08:00 via iPhone
    @keepeye 正解!既然是一个 component 也有路由,捕获到了错误后直接跳转到对应的理由上。在什么 axios 里做一个全局响应拦截,判断出错了就直接 router.push 到 500 或者其他什么错误页面
    mgso
        11
    mgso  
       2019-01-30 18:50:59 +08:00 via iPhone
    @vsomeone 那么可以在 app.vue 里 隐藏一个错误提示的 div 区域。如果出现错误了 router-view 里的内容隐藏,同时显示这个 div 区域的内容
    vsomeone
        12
    vsomeone  
    OP
       2019-01-30 18:58:31 +08:00 via iPhone
    @mgso 也可以,其实我问这个问题主要想给前端服务器 500 做个提示[捂脸],不过看样子是没办法实现了
    mgso
        13
    mgso  
       2019-01-30 19:03:29 +08:00 via iPhone
    @vsomeone 把这个方法写好 然后作为前端框架的基础配置 以后就是万金油了 手动滑稽
    qyxx
        14
    qyxx  
       2019-01-30 19:11:50 +08:00 via Android
    @vsomeone 所以你试过了吗?
    binaryify
        15
    binaryify  
       2019-01-30 19:17:03 +08:00
    nginx 返回 index.html/500 就行了吧,前端路由再写个 500 的页面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2883 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:33 · PVG 19:33 · LAX 04:33 · JFK 07:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.