小编lea*_*ore的帖子

Nuxt 不会自动从嵌套目录导入组件

在我的 nuxt 应用程序中,嵌套目录中的组件不会按预期自动导入。对于我的一些组件,我有如下内容:

vue 2.6.12, nuxt 2.15.0

components\ 目录结构

TopArea\
--SomeComponent.vue
Run Code Online (Sandbox Code Playgroud)
<template>
  <header class="header">
    <div>Hello</div>
    <SomeComponent />
  </header>
</template>
Run Code Online (Sandbox Code Playgroud)

应用程序中没有其他组件具有名称SomeComponent。在上面的示例中,我收到错误:Unknown custom element: <SomeComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.. 我可以通过在组件文件名 ( TopAreaSomeComponent)之前指定目录名、使用 nuxt.config 中的前缀选项或手动导入组件来解决这个问题。这令人困惑,因为文档说明:

嵌套目录
如果您在嵌套目录中有组件,例如:
components/baseButton.vue
组件名称将基于其自己的文件名。因此,该组件将是:
<button />

它继续说“为了清楚起见,我们建议您在文件名中使用目录名称”。但这似乎是规则而不是建议。如果我不使用目录名作为文件名的一部分,则动态导入不适用于嵌套目录中的组件。

这是文档中的错误还是我读错了?

nuxt.js

7
推荐指数
2
解决办法
2184
查看次数

Nuxt layouts/error.vue 在生产构建中不像在开发中那样工作

参考文档,我添加layouts/error.vue了一个页面处理错误。在开发 ( npm run dev) 中对此进行测试,一切都按预期进行。但是,当我这样做npm run build,然后npm start,该错误页面是不是当我测试的生产抛出异常呈现。

我正在使用,SSR但我在文档中没有看到任何建议不适layouts/error.vue用于SSR通用站点的内容。有一个类似的问题报告。该人为他们的用例做了一个变通方法。但是问题(主错误处理程序被忽略,异常最终记录到控制台而不是呈现错误页面)没有解决。

在开发中,如果我通过throw new Error()单击按钮引发测试错误,则会显示错误页面。但是在生产中,错误只会进入控制台,并且不会呈现错误页面。我可以让它在生产中工作而不改变很多其他代码的唯一方法是debug: truenuxt.config.js.

另请注意,error.vue对于 404 页,它也可以在生产中完美运行。但是,如果我throw new Error从组件进行生产构建,它就不会像在开发中那样工作。

您可以通过使用npm create nuxt-app <app name>. 以下是我选择的设置: 在此处输入图片说明

将以下内容添加到layouts/error.vue

<template>
  <div>
    <h1>You are in layouts/error.vue</h1>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <pre v-if="error.statusCode !== 404">{{ error }}</pre>
    <nuxt-link …
Run Code Online (Sandbox Code Playgroud)

nuxt.js nuxtjs

6
推荐指数
1
解决办法
2614
查看次数

标签 统计

nuxt.js ×2

nuxtjs ×1