NUXT.JS静态站点和404页

Question

i当前已经创建了一个

pages/404.vue

文件，然后，在我的服务器设置中，我将任何不存在的URL重定向到/404.html（生成的页面）。

我必须声明文件扩展名（如果我重定向到 /404，它会给我重定向错误），它似乎可以正常工作，我想这也将为我提供一种简单的方法来创建其他服务器错误文件（如果需要）。

，但是，在文档之后，我首先尝试在内部添加

fallback: true

。这在我的根部创建一个

generate:{ }

页，但是使用默认的NUXT布局（无限加载轮页）。

我认为（根据文档）创建

404.html

会解决问题，但似乎并非如此。

正确的做法是什么，如果要遵循文档，为什么我的个性化错误。 谢谢

在nuxt.js中生成404后备页面的订单您需要首先在nuxt.config.js中设置生成选项

layouts/error.vue

Answer 1

generate: { fallback: '404.html' }

您完成此操作后，您可以

layouts/error.vue

后面

nuxt generate

以404错误的后备页面运行您的项目。 没有收到的答案

i最终将其删除，并将其创建为

nuxt start

Error.vue为我提供了与default.vue相关的erros。

错误页面现在在DEV期间和新的NUXT期间都可以在完整静态站点上开始本地测试（NUXT 2.13以来），但仍然不在实时网站上，我将检查是否与服务器设置有关。

Answer 2

pages/404.vue

NUXT3更新2023：

如果您使用的是nuxt 3，则将

layouts/error.vue

添加到

根目录

，而不是添加到

layouts/basic.vue

或

generate: { fallback: true }

error.vue

Answer 3

要创建一个404页，足以创建两个新的布局，并在/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>

。 如果您希望您的404页与项目具有不同的结构，请使用

error.vue

，否则可以使用相同的

empty.vue

。

看到我的代码...layouts

Answer 4

带有自定义结构的空布局如下：

layout:"empty"

即将修改配置，我只是创建了一个截取所有未定义页面的页面。