Nuxt 如何从 markdown 文件生成静态 html？答案

【问题标题】：How does Nuxt generate static html from markdown file?Nuxt 如何从 markdown 文件生成静态 html？
【发布时间】：2021-04-02 13:57:37
【问题描述】：

这是我找到的大多数解决方案：

/// nuxt.config.js

export default {
  ......
  generate: {
    routes: fs.readdirSync('markdownDir').map(filename => {
      return {
        route: `/articles/${path.basename(filename, '.md')}`,
        content: fs.readFileSync(path.resolve('markdownDir', filename))
      }
    })
  },
}

/// _articleDetail.vue

<template>
    <div>
        <div class='markdown' v-html='html'></div>
    </div>
</template>

<script>
export default {
......
  async asyncData({params, content}) {
    return {id: params.id, html: processMarkdown(content)}
  },
}
</script>

它会生成所有带有文章ID的Html，但是那些Html文件不包含真正的markdown内容。就像：

......
<div class='markdown'>
(I need markdown content here,Not by js!)
</div>
<script src="/_nuxt/844cb81.js" defer></script>

/_nuxt/844cb81.js 有真正的降价内容！我认为这在 SEO 中会很糟糕。所以我想要一个可以直接生成包含原始markdown内容的html的解决方案。

【问题讨论】：

您的target 是否设置为static（默认为server）和ssr 是否设置为true（默认值）？调试此问题的一种解决方案是禁用 JS 并检查页面的源代码，您将确定它是否正确生成！ :D
@kissu Thinks,target 是static，然后尝试ssrbothtrue,false，不要工作！
你如何构建你的应用程序？
@kissu npm run generate

标签： nuxt.js

【解决方案1】：

想通了，我犯了一个错误。

所有指向article-detail page的NuxtLink都必须写成in static，也就是说你不能写成这样：

// the `loading` default is true

<div v-if='loading'>
    loading...
</div>
<div v-else>
    <NuxtLink v-for='id in idList' :to="'/article/'+id"/>
</div>

好像Nuxt在生成静态路由时已经编译了.vue文件，并且只调用了asyncData()函数，使用默认的data编译。

【讨论】：