小编Won*_*man的帖子

我正在和Contentful一起玩！我在使用富文本内容字段时遇到问题。

我使用“@contentful/rich-text-types”和@contentful/rich-text-html-renderer模块来自定义此块的呈现方式，并显示富文本内容中链接的一些资源和参考。

在 nuxt asyncData 函数中调用 getEntries 后，我的页面组件中有一个可用的描述数据。我正在使用带有选项的 documentToHtmlString 函数。

一切工作正常，但我想使用我已经编写的组件（Post.vue），而不是在 ES6 模板字符串中返回模板。

我知道这是可能的，但我对 JS 世界还很陌生。

我尝试要求 Components/post/Post.vue，但我不知道如何使用它。

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"

渲染富文本字段的 Vue 组件模板

  <section class="container">
    <div class="columns">
      <div class="column">
       <div v-html="formatContent(description)" /> 
      </div>
    </div>
  </section>

我只需调用 formatContent 方法来调用 documentToHtmlString，如下所示（它有效）：

  methods: {
    formatContent(content) {
      return documentToHtmlString(content, options)
    }
  }

并使用文档中描述的选项自定义 documentToHtmlString：

  const embeddedEntryRender = (node) => {
    const { data: { target: entry} …

我发现这篇很棒的文章可以在 Nuxt v2.13 应用程序中正确管理环境变量。我只是尝试实现建议的逻辑，但我遇到了一些问题，我想问你。

我设置 publicRuntimeConfig 和 privateRuntimeConfig 如下。我正在使用 Contentful，因此我必须正确设置 Contentful 令牌才能进行 API 调用。

export default {
  // Nuxt target - See https://nuxtjs.org/api/configuration-target
  target: 'static',

  // Nuxt rendering mode - See https://nuxtjs.org/api/configuration-mode
  mode: 'universal',

  // Both server and client.
  publicRuntimeConfig: {
    backendApi: process.env.BACKEND_API_URL
    shopUrl: process.env.SHOP_URL
  },

  // Only available on server using same $config (it overrides publicRuntimeConfig)
  privateRuntimeConfig: {
    ctfSpaceId: CTF_SPACE_ID,
    ctfCdaAccessToken: CTF_CDA_ACCESS_TOKEN,
    ctfCpaAccessToken: CTF_CPA_ACCESS_TOKEN,
    ctfEnvironment: CTF_ENVIRONMENT
  },

在模块导出语句上方，我必须定义 .env 中的数据，因此：

require('dotenv').config()

const {
  CTF_SPACE_ID,
  CTF_CDA_ACCESS_TOKEN,
  CTF_CPA_ACCESS_TOKEN,
  CTF_ENVIRONMENT, …