Markdown-它不适用于 Nuxt 和内容丰富，抛出错误

如何解决Markdown-它不适用于 Nuxt 和内容丰富，抛出错误

我正在使用 Contentful 构建网站，并遵循了不同的指南和配置。无论我做什么，我似乎都无法获得 Markdownit 工作的基本示例。我一直收到错误：

属性或方法“$md”未在实例上定义，但在渲染期间被引用。

无法在文档中获取任何示例： https://openbase.com/js/@nuxtjs/markdownit

我什至删除了整个模板并尝试了简单的版本。我还在下面的配置文件中尝试了不同的设置。

我已经运行了'yarn build'、'yarn add markdown-it'

而且似乎都没有帮助

这是我最终想要开始工作的内容：

<article v-html="$md.render(post.fields.body)"></article>

这是我正在关注的一个示例，它似乎在现场演示中起作用： https://github.com/sdras/contentful-nuxt-netlify/blob/e80e6552eef812320a7bd2dd66ad3fa8ebf5f840/pages/_slug.vue

上下文 - pages/_id/index.vue

<template>
  <div class="post-component">
    <a @click="$router.go(-1)">Go back to overview</a>
    <hr />
    <h1>{{post.fields.title}}</h1>
    <p></p>

    <p>
      {{post.fields.body}}
    </p>

    <article v-html="$md.render(post.fields.body)"></article>
    
  </div>
</template>

<script>
  import {createClient} from '../../plugins/contentful';
  const contentfulClient = createClient();

  export default {
    name: 'index',asyncData ({ env,params }) {
      return contentfulClient.getEntries({
        'content_type': env.CTF_BLOG_POST_TYPE_ID,'fields.slug': params.id
      }).then(post => {
        return {
          post: post.items[0]
        }
      }).catch(console.error)
    }
  }
</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
  }
  // ...
}

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',// Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'thomasulman',htmlAttrs: {
      lang: 'en'
    },meta: [
      { charset: 'utf-8' },{ name: 'viewport',content: 'width=device-width,initial-scale=1' },{ hid: 'description',name: 'description',content: '' },{ name: 'format-detection',content: 'telephone=no' }
    ],link: [
      { rel: 'icon',type: 'image/x-icon',href: '/favicon.ico' }
    ]
  },// Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],// Auto import components: https://go.nuxtjs.dev/config-components
  components: true,// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],// Modules: https://go.nuxtjs.dev/config-modules
  modules: [

  'nuxt-buefy',"@nuxtjs/markdownit"],markdownit: {
    runtime: true,// Support `$md()`
    injected: true,},// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

package.json

{
  "name": "******","version": "1.0.0","private": true,"scripts": {
    "dev": "nuxt","build": "nuxt build","start": "nuxt start","generate": "nuxt generate"
  },"dependencies": {
    "@nuxtjs/markdownit": "^1.2.10","contentful": "^8.4.2","core-js": "^3.15.1","markdown-it": "^12.1.0","nuxt": "^2.15.7","nuxt-buefy": "^0.4.8"
  },"devDependencies": {}
}

以防万一它有帮助： 索引.vue

<template>
  <div>
    <!-- <Navigation /> -->
    <!-- render data of the person -->
    <h1>{{ person.fields.name }}</h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts">
        {{ post.fields.title }}
        <nuxt-link :to="post.fields.slug" class="more">Read more ⟶</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<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 {
        person: entries.items[0],posts: posts.items
      }
    }).catch(console.error)
  }
}
</script>

解决方法

我已实现使其正常工作，如下所示：https://github.com/nuxt-community/markdownit-module#usage

我也添加了一个 proper HTML sanitizer，检查插件目录。

您可以在此处找到可用的 Github 存储库：https://github.com/kissu/so-nuxt-markdownit

目前这个配置对我来说已经足够了
nuxt.config.js

plugins: [
  '~/plugins/vue-dompurify'
],modules: [
  '@nuxtjs/markdownit'
],markdownit: {
  runtime: true,// Support `$md()`
  // preset: 'default',// linkify: true,// breaks: true,// use: [
  //   'markdown-it-div',//   'markdown-it-attrs'
  // ]
}

并且这两个文件工作正常
index.vue

<template>
  <div>
    <div v-dompurify-html="$md.render(model)"></div>

    <br/>
    <br/>

    <div v-dompurify-html="testMarkdownContent"></div>

    <nuxt-link to="/inline">Inline markdown working too!</nuxt-link>
  </div>
</template>

<script>
import testMarkdown from '../blog/test.md'

export default {
  data() {
    return {
      model: '# Hello World!'
    }
  },computed: {
    testMarkdownContent() {
      return testMarkdown
    }
  }
}
</script>

inline.vue

<template lang="md">
  # Hello World!

  Current route is: {{ $route.path }}

  <nuxt-link to="/">Back to index</nuxt-link>
</template>

,

整个事情的问题在于 // module.exports {} 覆盖了配置文件中的导出默认 {}。