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

Question

我正在使用 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: {
  }
}

包.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": {}
}

以防万一它有帮助：index.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>

Answer 1

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

我也添加了一个合适的 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>

Answer 2

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