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

时间:2019-07-04 07:16:15

标签: javascript webpack nuxt.js

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

当我处于开发模式时,通过localhost访问整个站点时,如果到达一个名称错误的页面,则会显示404页面,但是在生产环境中,我看不到该页面。而是显示另一个页面:

enter image description here

代码如下:

<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/

我想念什么吗?

1 个答案:

答案 0 :(得分:0)

您是否正在使用nuxt生成模式?在这种情况下,如果找不到请求的页面,则您忘记设置静态服务器(看起来像ISS?)来提供200.html后备文件。 https://nuxtjs.org/api/configuration-generate#fallback

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