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

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

  •  
  •   vsomeone · 85 天前 · 1163 次点击
    这是一个创建于 85 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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