vue引入并解析md文件

最近在做一个开放接口的项目

后端同学提供了接口文档的MD文件

我需要做的就是引入md文件 然后解析 然后渲染

很简单的

安装依赖

首先我们要安装解析md文件的loader

cnpm i html-loader markdown-loader --save-dev

配置webpack

在vue.config.js里进行配置

module.exports = {
    chainWebpack: config => {
        ......
        config.module
            .rule('md')
            .test(/.md$/)
            .use('html-loader')
            .loader('html-loader')
            .end()
            .use('markdown-loader')
            .loader('markdown-loader')
            .end()
    }
}

页面引入和渲染

在页面引入md文件 并渲染

<template>
  <div>
    <div v-html="md">
             
    </div>
  </div>
</template>
 
<script>
import demo from "../../assets/demo.md";
 
console.log(demo)
 
export default {
  data() {
    return {
      md:demo
    };
  }
};
</script>
 
<style lang="less" scoped>
// 这里可以约束解析出来后的 markdown 标签样式，如设置 h1{...}
</style>

MD样式未渲染

可能会出现MD文件的样未渲染的问题

这时候就需要我们下载另外一个依赖

cnpm install github-markdown-css

然后在main.js中将md文件的样式引入

import 'github-markdown-css';

最后给页面的div盒子加上样式的class

 <div v-html="md" class="markdown-body" >
 
  </div>

这样就可以啦

效果如图