Nuxt 错误页面未在生产中显示

Posted 2023-02-22

【中文标题】Nuxt 错误页面未在生产中显示

【英文标题】：Nuxt error page not showing on production

【发布时间】：2022-01-20 04:44:52

【问题描述】：

我有一个 Nuxt 应用程序（“nuxt”：“2.15.8”），我需要创建一个 404 页面。

阅读docs我添加了layouts/error.vue内容：

<template>
  <div>
    <p>An error occurred</p>
    <NuxtLink to="/">Back to home</NuxtLink>
  </div>
</template>

<script>
  export default 
    // Do not need it, I only need the 404 page
    // props: ['error'],
  
</script>

nuxt.config.js 有：

target: 'static'

它在开发模式下运行良好 (yarn dev)。但是，当我构建应用程序 (yarn generate) 并将内容移至生产环境时，它会显示默认浏览器页面：

这是有道理的，因为 yarn generate 不会创建 404.page：

➜  dist git:(master) ✗ la
total 44K
-rw-rw-r-- 1 foo foo 4,4K pro  16 14:39 200.html
-rw-rw-r-- 1 foo foo 8,5K pro  16 14:39 favicon.ico
-rw-rw-r-- 1 foo foo 4,4K pro  16 14:39 index.html
-rw-rw-r-- 1 foo foo    0 pro  16 14:39 .nojekyll
drwxrwxr-x 3 foo foo 4,0K pro  16 14:39 _nuxt

如何修复它以使产品显示 404 页面？谢谢

【问题讨论】：

如果你上传it here，你会投影工作吗？

【参考方案1】：

Nuxt 不会创建默认的404.html 页面，因为它是一个 webapp，如果有错误默认的后备页面是页面 200.html，如果你想将 200.html 更改为 404.html 你需要添加：

generate:  fallback: '404.html' ,

在你的nuxt.config.js。

但这根本不是，在某些服务器中你需要重定向到正确的404页面。

【讨论】：

您也可以使用fallback: true，如the documentation所示。

我在我的 pages 目录中创建了一个 '_.vue' 文件来处理 404 not found 错误。你能告诉我这是否可以，或者我应该避免它并改用其他解决方案吗？

这取决于，通过这种方式（不那么优雅）你可以对用户说“嘿兄弟页面不存在”，但对谷歌你总是说 http 200 代码