原文鏈接：https://blog.jijian.link/2020-12-03/nuxtjs-server-error-page/
當 nuxt 項目在生產環境運行時，如果服務端運行出錯，比如 asyncData 方中出錯時候，會拋出如下錯誤頁面：
雖然官網提供了一個新增 /layouts/error.vue 頁面組件的方法自定義錯誤頁面。
但是此錯誤頁面僅用於瀏覽器端錯誤拋出時候使用，比如代碼在瀏覽器端報錯時候會進入此頁面，服務端報錯還是會進入上面截圖所示的 Server error 頁面。
官方文檔並沒有提到如何自定義 Server error 頁面，搜索了下 github 倉庫和 issues ，大概找了以下兩種方式。
測試錯誤頁面
pages 目錄新增 error.vue
<template> <div /> </template> <script> export default { asyncData () { throw new Error('error'); }, }; </script>
執行生產環境命令 npm run build && npm start ，瀏覽器訪問 localhost:3000/error，就會看到最開始截圖所示的錯誤頁面了。
方法一：修改頁面中的文字
官方源碼中有這么一部分代碼：
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 修改，如下所示：
const config = { // ... messages: { server_error: '500', server_error_details: '服務器內部錯誤', }, // ... }; export default config;
此方法僅用於錯誤頁面上的文字修改，並不能完全修改頁面樣式！
方法二：完全自定義錯誤頁面
不知道是不是官方文檔故意不添加此方法，還是他們完全忘記了有這么一回事，此方法是通過 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-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 中的其他文件也可以通過此方法修改，暫未測試。