前提概要

自从在公司的项目引入了markdown之后，现在的我们公司写的文档万物皆是markdown。好了吧，现在使用nuxtjs进行网站拆分改版之后，大锅了，使用vue进行读取文档的方案走不通了，真是让我头大嘚不嘚了。经过了多方面资料查询之后，终于在找到了nuxtjs的衍生库@nuxt/content。

加载对比

vue版本

vue2.0与3.0版本都只需要在配置文件vue.config.js中加载vue-loader和vue-markdown-loader就可以了进行路由加载md文件。

chainWebpack: config =>{
    config.module.rule('md')
    .test(/.md$/)
    .use('vue-loader')
    .loader('vue-loader')
    .end()
    .use('vue-markdown-loader')
    .loader('vue-markdown-loader/lib/markdown-compiler')
    .options({
        raw: true,
        preventExtract: true,
        use: [containers], //引进来了
        preprocess: (MarkdownIt, source) =>{
            MarkdownIt.renderer.rules.table_open = ()=> {
              return '<table class="table">';
            };
            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence)
            return source;
          }
    })
}

nuxtjs

同样的在配置文件nuxt.config.js进行配置，但是还是报错了。无论是用loader还是use进行loader加载，始终还是报错。

{
    test: /.md$/,
    loaders: ['vue-loader', 'vue-markdown-loader/lib/markdown-compiler'],
    // use: [
    //     {loader: 'vue-loader'},
    //     {loader: 'vue-markdown-loader/lib/markdown-compiler', options: {
    //             raw: true,
    //             preventExtract: true,
    //             use: [containers], //引进来了
    //             preprocess: (MarkdownIt, source) =>{
    //                 MarkdownIt.renderer.rules.table_open = ()=> {
    //                     return '<table class="table">';
    //                 };
    //                 MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence)
    //                 return source;
    //             }
    //         }}
    // ],
}

解决方案

step1

安装@nuxt/content依赖 npm install @nuxt/content

step2

进入配置文件nuxt.config.js的moudles进行加载

modules: [
    '@nuxt/content',
],

step3

创建content文件夹并添加对应的md文件，@nuxt/content会对content文件夹内的文件进行自动识别

step4

vue文件中进行引用，页面中就显示出来了

<template>
   <div>
      <nuxt-content :document="page" />
   </div>
</template>

<script>
    export default {
        async asyncData ({ $content }) {
            const page = await $content('test').fetch()

            return {
                page
            }
        },
    }
</script>

注意：官网文档会有对应的视频，视频能够只通过一个页面就能够跳转到其他markdown文件，但是实际是会报错，找不到文件的。

结语

总的来说还是没有实现通过路由来进行md文件的读取，这种方法还是需要借助vue的每一个文件进行读取，还是多了一步的步骤，如果有人能够知道如何在路由中进行读取md文件，还请大家指点一下。不过呢，还是学习到了nuxtjs中如果读取md的，而且@nuxt/content有个一个特别的之处就是可以在线编辑进行保存，这点在以后开发还是方便了不少的。

最后，古德拜。

nuxtjs如何读取编写markdown文件（@nuxt/content）