时间戳

首页 > 解决方案 > 使用 Nuxt 生成的自定义 404 页面仅在开发模式下工作

javascript - 使用 Nuxt 生成的自定义 404 页面仅在开发模式下工作

问题描述

我在文件夹中有一个error.vue页面。layouts

当我在开发模式下访问整个 localhost 的站点时，如果我到达一个名称错误的页面，则会显示 404 页面，但是当我处于生产状态时，我看不到该页面。相反，会出现另一个页面：

在此处输入图像描述

这是代码：

<template>
  <v-app>
    <v-container>
      <v-layout row wrap align-center justify-center fill-height>
        <v-flex xs12 sm12 md6>
          <v-img
            :src="require('@/assets/images/404.svg')"
            width="90%"
          ></v-img>
        </v-flex>
        <v-flex xs12 sm12 md6 class="mb-5">
          <h1 class="display-4 light-grey font-weight-medium text-xs-center text-sm-center text-md-left mb-3">Oops!</h1>
          <h1 class="display-3 light-grey font-weight-medium text-xs-center text-sm-center text-md-left">The page you are looking for is not found.</h1>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>
export default {
  props: ['error'],
  data() {
    return {
    }
  }
}
</script>

<style scoped>
  .light-grey{
    color: #4f4f4f;
  }
</style>

Nuxt 版本：2.8.1

按照这个https://nuxtjs.org/guide/views/

我错过了什么吗？

标签： javascriptwebpacknuxt.js

解决方案

你用的是nuxt生成模式吗？在这种情况下，如果找不到请求的页面，您忘记设置静态服务器（看起来像 ISS？）以提供 200.html 后备文件。https://nuxtjs.org/api/configuration-generate#fallback

如果您使用的是 nuxt 通用模式，您的代理服务器会调整为拦截错误并显示自己的页面而不是 nuxt 错误页面。

推荐阅读