呈现函数或模板未在组件中定义: pages/index.vue

Question

render function or template not defined in component: pages/index.vue

我不确定这个错误试图告诉我什么，我试图跟随堆栈，但无法明确确定问题是什么。

在使用NuxtJS和Contentful创建博客的Contentful教程中，我遇到了这个错误。我已经验证了contentful是随npm install一起安装的--save Contentful。

Index.vue

<div class="container">
   <div class="columns">
      <div class="column is-offset-2 is-8">
         <h1 class="title is-2">Latest Posts</h1>
         <hr>
         <h2 class="title is-4" v-for="(post, index) in posts" :key="index">
            <nuxt-link :to="{name : 'blogPost',params: { post : post.fields.slug}}">{{ post.fields.title }}</nuxt-link>
         </h2>
      </div>
   </div>
</div>
<script>
  import {createClient} from '~/plugins/contentful.js'

  const client = createClient()
  export default {
    // `env` is available in the context object
    asyncData ({env}) {
      return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          'sys.id': env.CTF_PERSON_ID
        }),
        // fetch all blog posts sorted by creation date
        client.getEntries({
          'content_type': env.CTF_BLOG_POST_TYPE_ID,
          order: '-sys.createdAt'
        })
      ]).then(([entries, posts]) => {
        // return data that should be available
        // in the template
        return {
          posts: posts.items
        }
      }).catch()
    }
  }
</script>

nuxt.config.js

const config = require('./.contentful.json')

module.exports = {
env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  },
  /*
  ** Headers of the page
  */
  head: {
    title: 'cometthon',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

contentful.js

const contentful = require('contentful')

// use default environment config for convenience
// these will be set via 'env' property in nuxt.config.js

const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

// export 'createClient' to use it in page components

module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

预期:站点运行，从内容服务器检索内容，并在页面上呈现。实际:站点运行，错误出现在索引页面上

Answer 1

尝试将所有代码放在<template>元素中