组件中未定义的渲染函数或模板：pages/index.vue

Posted 2023-02-22

【中文标题】组件中未定义的渲染函数或模板：pages/index.vue

【英文标题】：render function or template not defined in component: pages/index.vue

【发布时间】：2019-12-08 09:19:54

【问题描述】：

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

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

在遵循有关使用 NuxtJS 和 Contentful 创建博客的 Contentful 教程时，我遇到了这个错误。我已经验证 Contentful 是使用 npm install --save contentful 安装的。

索引.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)
  

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

【问题讨论】：

你看过这个***.com/questions/54341251/…

用<template>标签包裹你的html

【参考方案1】：

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