nuxtjs 自定义服务端错误页面 Server error page

本文 nuxt 版本 2.14.6!

nuxt 项目在生产环境运行时,如果服务端运行出错,比如 asyncData 方中出错时候,会抛出如下错误页面:

虽然官网提供了一个新增 /layouts/error.vue 页面组件的方法自定义错误页面。

但是此错误页面仅用于浏览器端错误抛出时候使用,比如代码在浏览器端报错时候会进入此页面,服务端报错还是会进入上面截图所示的 Server error 页面。

官方文档并没有提到如何自定义 Server error 页面,搜索了下 github 仓库和 issues ,大概找了以下两种方式。

测试错误页面

pages 目录新增 error.vue

1
2
3
4
5
6
7
8
9
10
<template>
<div />
</template>
<script>
export default {
asyncData () {
throw new Error('error');
},
};
</script>

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

1
2
$ npm run build && npm start
...

方法一:修改页面中的文字

官方源码中有这么一部分代码:

messages.jslink
1
2
3
4
5
6
7
8
9
10
11
12
export default () => ({
loading: 'Loading...',
error_404: 'This page could not be found',
server_error: 'Server error',
nuxtjs: 'Nuxt',
back_to_home: 'Back to the home page',
server_error_details:
'An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.',
client_error: 'Error',
client_error_details:
'An error occurred while rendering the page. Check developer tools console for details.'
})

此处的配置信息可以通过 nuxt.config.js 修改,如下所示:

1
2
3
4
5
6
7
8
9
const config = {
// ...
messages: {
server_error: '500',
server_error_details: '服务器内部错误',
},
// ...
};
export default config;

此方法仅用于错误页面上的文字修改,并不能完全修改页面样式!

方法二:完全自定义错误页面

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

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

error.htmllink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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-width: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,就可以看到自定义的服务端错误页面了。

其他

方法二不仅可以修改 error.html ,还可以修改 app.template.html,虽然官网提供根目录新建 app.html 方法修改模版,但为了统一路径,还是用方法二比较合理。

大概 views 中的其他文件也可以通过此方法修改,暂未测试。

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2020-12-03/nuxtjs-server-error-page/

如果您觉得文章不错,可以请我喝一杯咖啡!