vue 解析md文件 并渲染样式

安装依赖

需要安装的依赖

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

解析md文件

<template>
  <div v-html="md">
    </div>
</template>

<script>
import demo from '../../static/lib/release.md';
export default {
  name: 'layerIdList',
  data () {
    return {
      md: demo
    };
  },
  methods: {}
};
</script>

常见问题

问题一：引用md文件报错

解决：在webpack.base.conf.js文件中添加相应规则，代码如下：

  {
    test: /\.md$/,
    use: [
      {
        loader: "html-loader"
      },
      {
        loader: "markdown-loader",
        options: {}
      }
    ]
  },

问题二：解析后的页面无样式

解决：安装依赖

cnpm install github-markdown-css

在main.js中将github-markdown-css导入

import 'github-markdown-css';

在相应容器添加markdown_body样式

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

完成！