Nuxt.js 静态站点和 404 页面

Question

我目前已经创建了一个pages/404.vue文件，然后在我的服务器设置中，我将任何不存在的 url 重定向到 /404.html（生成的页面）。

除了我必须声明文件扩展名（如果我重定向到 /404，它会给我重定向错误），它似乎工作正常，而且我想它还会给我一个简单的方法来创建其他服务器错误文件，如果需要的话。

但是，按照文档，我首先尝试fallback: true在里面添加generate:{ }. 这会404.html在我的根目录中创建一个页面，但使用默认的 Nuxt 布局（无限加载轮页面）。

我认为创建layouts/error.vue（根据文档）可以解决问题，但似乎并非如此。

什么是正确的做法，如果要遵循文档，为什么我的个性化 error.vue 不起作用？谢谢。

Answer 1

为了在 nuxt.js 中生成 404 回退页面，您需要首先像这样在 nuxt.config.js 中设置 generate 选项 generate: { fallback: '404.html' }

然后你需要在你的 layouts 目录中创建一个名为 error.vue 的新布局

layouts/error.vue

你这样做了之后，你可以nuxt generate接着nuxt start用的404错误页面后备运行项目。

Answer 2

没有收到答复。

我pages/404.vue最后删除了并将其创建为layouts/error.vue

由于某些原因，error.vue 给了我与 default.vue 相关的错误，因此我layouts/basic.vue为 error.vue 创建了一个布局作为（几乎）空的容器。

错误页面现在可以在开发期间和新的 nuxt 期间在完整的静态站点上开始本地测试（自 nuxt 2.13 起），但仍然不能在实时站点上运行，我将检查是否与服务器设置相关。

上面的内容与generate: { fallback: true }nuxt.config.js 一起使用（创建 404.html 页面）

Answer 3

NUXT 3 更新 2023 年：

如果您使用的是 Nuxt 3，请添加error.vue到根目录，而不是添加到/pages或/layouts

// /error.vue
<template>
    <div class="flex flex-col items-center">
            <div class="text-indigo-500 font-bold text-7xl">
                404
            </div>

            <div class="font-bold text-3xl xl:text-7xl lg:text-6xl md:text-5xl mt-10">
                This page does not exist
            </div>

            <div class="text-gray-400 font-medium text-sm md:text-xl lg:text-2xl mt-8">
                The page you are looking for could not be found.
            </div>
    </div>
</template>