zoukankan      html  css  js  c++  java
  • Nuxt.js自定义错误页

    在 asyncData 有错误的时候会出现这个错误,这个可以自定义吗?

     可以,

    完全自定义错误页面

    不知道是不是官方文档故意不添加此方法,还是他们完全忘记了有这么一回事,此方法是通过 issues 找到的。

    项目目录新增 app/views/error.html, app 目录与 pages 目录同级。内容可以复制 github 的官方源码

    <!DOCTYPE html>
    <html>
    <head>
    <title><%= messages.server_error %></title>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport>
    <style>
    .__nuxt-error-page{padding: 1rem;background:#f7f8fb;color:#47494e;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-450px}.__nuxt-error-page .title{font-size:24px;font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}
    </style>
    </head>
    <body>
      <div class="__nuxt-error-page">
        <div class="error">
            <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"/></svg>
            <div class="title"><%= messages.server_error %></div>
            <div class="description"><% if (debug) { %>{{ message }}<% } else { %><%= messages.server_error_details %><% } %></div>
        </div>
        <div class="logo">
          <a href="https://nuxtjs.org" target="_blank" rel="noopener"><%= messages.nuxtjs %></a>
        </div>
      </div>
    </body>
    </html>

    完全可以删除以上所有内容,自己写一个自定义的 html 页面来呈现错误。

    重新编译运行 npm run build && npm start,就可以看到自定义的服务端错误页面了

    测试的话 可以在创建一个 pages/error.vue 加个错误

    <template>
      <div />
    </template>
    <script>
    export default {
      asyncData () {
        throw new Error('error');
      },
    };
    </script>
    

    行生产环境命令,浏览器访问 localhost:3000/error,就会看到最自定义所示的错误页面了。

    基于 https://github.com/nuxt/nuxt.js/issues/2120   issues  

  • 相关阅读:
    CSS Sprite笔记
    前端分页页码静态部分制作
    有趣的网页小部件笔记
    Lintcode 85. 在二叉查找树中插入节点
    Lintcode 166. 主元素
    网页失去焦点标题变化效果
    Lintcode 166. 链表倒数第n个节点
    Lintcode 157. 判断字符串是否没有重复字符
    Lintcode 175. 翻转二叉树
    Lintcode 372. O(1)时间复杂度删除链表节点
  • 原文地址:https://www.cnblogs.com/lllomh/p/14991856.html
Copyright © 2011-2022 走看看