Vue.js Nuxt.js找不到有错误的组件；未能装入组件：未定义模板或呈现函数；

我的Nuxt.js网站有问题。 我定义了一个页面，带有动态slug参数，如下所示：

/solutions/：slug

如果我直接在浏览器中访问页面，它将正确加载！ 但是，如果单击NavBar组件中的nuxt链接，控制台中会出现以下错误，页面不会加载：

vue.runtime.esm.js?2b0e:619

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

vue.runtime.esm.js？2b0e:619
[Vue warn]：未能装载组件：未定义模板或呈现函数。
发现于
---> 
在layouts/default.vue处

我有一个默认布局文件，如下所示：

布局/default.vue

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

<script>
import NavBar from "~/components/Layout/NavBar"

export default {
  components: {
    NavBar,
  },
}
</script>

<template>
  <b-navbar wrapper-class="container" fixed-top>
    <template slot="end">

      <nuxt-link
        :to="{
          name: 'solutions-slug',
          params: { slug: 'performance' },
        }"
        class="navbar-item"
        target="self"
      >
        <span class="icon is-medium">
          <i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
        </span>
        <span class="label">
          Performance
        </span>
      </nuxt-link>

    </template>
  </b-navbar>
</template>

<template>
  <div class="solution">
    This is my solution page.
  </div>
</template>

从“~/components/Layout/NavBar”导入导航栏
导出默认值{
组成部分：{
导航栏，
},
}

我的导航栏包含以下nuxt链接：

组件/布局/NavBar.vue

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

<script>
import NavBar from "~/components/Layout/NavBar"

export default {
  components: {
    NavBar,
  },
}
</script>

<template>
  <b-navbar wrapper-class="container" fixed-top>
    <template slot="end">

      <nuxt-link
        :to="{
          name: 'solutions-slug',
          params: { slug: 'performance' },
        }"
        class="navbar-item"
        target="self"
      >
        <span class="icon is-medium">
          <i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
        </span>
        <span class="label">
          Performance
        </span>
      </nuxt-link>

    </template>
  </b-navbar>
</template>

<template>
  <div class="solution">
    This is my solution page.
  </div>
</template>

演出

我有一个页面，由slug参数定义：

页面/解决方案/\u slug.vue

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

<script>
import NavBar from "~/components/Layout/NavBar"

export default {
  components: {
    NavBar,
  },
}
</script>

<template>
  <b-navbar wrapper-class="container" fixed-top>
    <template slot="end">

      <nuxt-link
        :to="{
          name: 'solutions-slug',
          params: { slug: 'performance' },
        }"
        class="navbar-item"
        target="self"
      >
        <span class="icon is-medium">
          <i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
        </span>
        <span class="label">
          Performance
        </span>
      </nuxt-link>

    </template>
  </b-navbar>
</template>

<template>
  <div class="solution">
    This is my solution page.
  </div>
</template>

这是我的解决方案页面。

我试图理解为什么点击nuxt链接无法加载页面，即使我正确地看到浏览器中的URL更改

---

谢谢

在v2.13版之后，Nuxt可以在模板中使用时自动导入组件。 检查

numxt.config.js

如果components属性为true，则不需要在.vue文件中导入组件

在您的布局/default.vue中删除脚本标记；-）

例如，我们有以下组件：

components
  | site
     - header
  | admin
     - header
     - footer
     | sub
        - header
        - footer

当我们需要调用组件时，只需使用破折号或小写字母分隔前缀和组件名称

在layouts/default.vue中删除脚本标记；-）

注意：对于根组件

/Components/nav.vue

，我们必须使用CammelCase

，如果我们这样称呼这个组件

，它就不工作了

---

问题可能与上述任何内容无关

首先，检查您的配置是否正确。我看到您正在使用“nuxtjs/content”模块，所以您可能也在使用Contentful。在过去，我遇到过类似的情况（“未能装载组件：模板或呈现函数未定义”问题），原因是我用于存储变量的“dotenv”模块安装不正确

在我的例子中，应用程序没有从.env文件加载变量。结果，他们找到了未识别的满足客户机，并导致了js错误。由于某些原因，此错误并不总是出现在控制台中。相反，出现了上述警告

确保已正确安装“dotenv”模块（如果使用）。我记得在我的例子中，有必要安装'nuxtjs/dotenv'而不是通常的dotenv

---

如果是这样，请告诉我。祝你好运

谢谢你的回复。是的，我的nuxt.config.js中确实有

组件：true

。我改变了这一点，并按照您的建议定义了路径和前缀。页面和导航显示正确。但是，当我单击

numxt链接时，出现了完全相同的错误消息。因此，我认为这与组件加载无关：-（@rlarcombe我测试了你的代码，它工作正常！看看这个哇！谢谢Morteza。仔细比较我的设置和你的设置，我能看到的唯一区别是你有
模块：[“@nuxtjs/axios”]
在您的nuxt.config.js中，我想知道这是否会对页面的加载方式产生影响。？我在nuxt.config.js中看到的另一个模块差异是我使用的是
“@nuxt/content”，
@rlarcombe
@nuxt/modules
对导航没有影响，但是如果你在你的slug页面中使用
@nux/content
，这可能会出错。天才！！！是dotenv把我绊倒在这里了…其他一切都是骗人的。谢谢！