Nuxt.js 找不到有错误的组件 "Failed to mount component: template or render function not defined."

Question

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

/solutions/:slug

如果我直接在浏览器中访问该页面，它会正确加载！但是，如果我在我的 NavBar 组件中单击 nuxt-link，我会在控制台中收到以下错误，并且页面不会加载：

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>

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

layouts/default.vue

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

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

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

我的导航栏包含以下 nuxt-link:

components/Layout/NavBar.vue

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

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

pages/solutions/_slug.vue

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

我试图理解为什么单击 nuxt-link 无法加载页面，即使我在浏览器中正确看到 URL 更改。

谢谢

Answer 1

在 v2.13 版本之后，Nuxt 可以 auto-import 在您的模板中使用您的组件。检查 nuxt.config.js 如果 components 属性为 true 那么你不需要在 .vue 文件中导入你的组件。

在你的 layouts/default.vue 中删除脚本标签 ;-)

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

如果您需要按文件夹对组件进行分类，请执行以下操作。

转到 nuxt.config.js 并更改您的组件属性

export default {
  components: {
    dirs: [
      '~/components',
      {
        path  : '~/components/site/',
        prefix: 'Site'
      },
      {
        path  : '~/components/admin',
        prefix: 'Admin'
      },
      {
        path  : '~/components/admin/sub',
        prefix: 'AdminSub'
      }
    ]
  }
}

例如，我们有这些组件：

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

当我们需要调用组件时，只需将前缀和组件名称用破折号或驼峰式分隔即可。

在你的 layouts/default.vue 中删除脚本标签 ;-)

<template>
  <div>

   <!-- with dash -->
   <site-header></site-header>
   <admin-header></admin-header>
   <admin-sub-header></admin-sub-header>


   <!-- cammel -->
   <SiteHeader></SiteHeader>
   <AdminHeader></AdminHeader>
   <AdminSubHeader></AdminSubHeader>

  </div>
</template>

Attention: For Root Components /components/nav.vue, We Must Use CammelCase <Nav/> and if we call this component like this <nav/> it doesn't work.

Answer 2

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

首先，请检查您的配置是否正确。我看到您正在使用 'nuxtjs/content' 模块，所以您可能也在使用 Contentful。我以前也遇到过类似的情况（'Failed to mount component: template or render function not defined'问题），是因为我用来存储变量的'dotenv'模块安装不正确。

在我的例子中，应用程序没有从 .env 文件加载变量。结果，他们不明就里的去了Contentful客户端，导致了js错误。由于某种原因，这个错误并不总是出现在控制台中。相反，above-mentioned 警告出现了。

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

如果是这种情况，请告诉我。祝你好运

Nuxt.js 找不到有错误的组件 "Failed to mount component: template or render function not defined."

Nuxt.js could not found component with errors "Failed to mount component: template or render function not defined."

vue.js

vue-router

vuejs2

nuxt.js

nuxtjs