NuxtJs:ReferenceError:未定义 NuxtError

Posted

技术标签:

【中文标题】NuxtJs:ReferenceError:未定义 NuxtError【英文标题】:NuxtJs: ReferenceError: NuxtError is not defined 【发布时间】:2020-12-29 22:57:39 【问题描述】:

我是 NuxtJs 的新手。我想测试 nuxt-link 是如何工作的,所以我故意将一个 nuxt-link 放到一个不起作用的路由上,希望重定向到默认的 404 页面。我把这一行放在pages/index.vue 文件中:

<nuxt-link to='/asksdkjd'>ssss</nuxt-link>

它以 chrome 显示,如 this:

单击链接后,我在控制台中收到以下错误:

ReferenceError: NuxtError is not defined
at Vue.errorChanged (App.js?efe7:173)
at Watcher.run (vue.runtime.esm.js?2b0e:4568)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "nuxt.err"
(found in <Root>)

这是error screenshot 当我被重定向到链接时会显示此错误,因为您可以在 url 栏中看到无效链接。它不会呈现默认的 404 页面。 但是当我点击刷新时,我可以看到 404 页面(sceenshot)。

这是我在安装这个新项目时生成的nuxt.config.js 文件。(我省略了 cmets。)

export default 
  mode: 'universal',
  target: 'static',
  head: 
    title: process.env.npm_package_name || '',
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: process.env.npm_package_description || '' 
    ],
    link: [
       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
    ]
  ,
  css: [
  ],
  plugins: [
  ],
  components: true,
  buildModules: [
  ],
  modules: [
  ],
  build: 
  


我一直在谷歌上搜索这个错误,但找不到任何东西。我也在Firefox中尝试过,但同样的问题正在发生。希望大家能帮忙。提前致谢。

【问题讨论】:

看起来这个 bug 是通过 Pull Request 在框架中引入的。贡献者已经请求 PR 来解决这个问题。这是我创建的问题的link。 【参考方案1】:

定义你的错误页面。

创建这个文件:layouts/error.vue

<template>
  <div class="container">
    <div v-if="error.statusCode === 404">
      <h1>Page not found</h1>
      <p> error.message </p>
    </div>
    <div v-else>
      <h1>An error occurred</h1>
    </div>
    <n-link to="/">Home page</n-link>
  </div>
</template>

<script>
export default 
  props: ['error'],
  layout: 'default' // If you prefers you can set a custom layout for the error page

</script>

更多信息:查看有关 error page 的 nuxt 文档

【讨论】:

谢谢,但这是我可以创建的自定义错误页面。我试图重定向到默认的 404 页面。无论如何,事实证明当前版本的 nuxt.js 存在错误。我希望它很快得到修复。感谢您提供帮助。 error.message 之前缺少关闭。

以上是关于NuxtJs:ReferenceError:未定义 NuxtError的主要内容,如果未能解决你的问题,请参考以下文章

ReferenceError:未定义提取

未定义函数 - 未捕获的 ReferenceError

打字稿 - 未捕获的 ReferenceError:未定义导出

ReferenceError: $ 未定义

NuxtJS Apollo 模块 TypeError:无法读取未定义的属性“$apolloHelpers”

ReferenceError:未定义 DartObject