在托管的Nuxt应用程序中利用错误布局

问题描述

我刚刚在layouts/error.vue的Nuxt.js应用程序中创建了自定义错误消息。目前，我已经非常简单了，因为它暂时只是一个小册子网站，所以我只是在处理如下所示的错误，因为现在我只关心用户访问的页面不存在。>

<template v-if="error.statusCode === 404">
    <h1>Sorry!</h1>
    <p>We can't find the page you are looking for.</p>
</template>
<template v-else>
    // Some other message
</template>

在本地运行我的应用程序并尝试导航到不存在的路由时，这可以正常工作并显示错误消息。

但是，我的托管应用程序不符合我的期望。我将应用程序作为Cloud Foundry应用程序托管在IBM Cloud上。该应用程序使用静态buildpack，我的manifest.yml文件如下所示：

---
applications:
  - name: name
    path: ./dist
    buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
    random-route: true

但是，如果我尝试以这种方式导航至错误的路线，则会显示一般的Nginx 404错误：

我了解您可以通过两种方法告诉Cloud Foundry应用程序需要静态的buildpack-在manifest.yml中声明buildpack或在Staticfile中添加名为dist的文件运行npm run generate之后的目录。在此文件中，您可以添加一些配置，其中之一是状态码，

允许为HTTP状态代码定义自定义页面，而不是默认的Nginx页面。

status_codes:
  404: /404.html
  500: /500.html

但是，我的错误处理是在布局而不是页面中完成的。而且我生成的项目文件夹在任何地方都不包含一个称为错误的页面，因此我不知道如何使用此方法来进行错误处理。

如果有人可以给我一些正确完成操作的指示，将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）