在vue中显示markdown（.md)文件

方法一：

npm i text-loader vue-markdown --save

在vue.config.js中配置：

config.module.rule('md')
      .test(/\.md/)
      .use('text-loader')
      .loader('text-loader')

在vue文件中使用：

<template>
  <vue-markdown>{{content}}</vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown' 
import md from 'xxx.md'
export default {
  name: 'demo',
  data() {
    return {
      content: md
    }
  },
  components: {
    VueMarkdown  
  }
}
</script>

可以显示md文件，但是我的md文件中使用了本地图片，没显示出来，而且部分格式也有问题，不过我没调，可能有办法解决，我看挺多人用这种方法的，我后来使用的是第二种方法。

方法二

转自https://evolly.one/2019/07/01/118-vue-markdown-loader/

npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D
# 样式
npm i github-markdown-css -D
npm i highlight.js -D

在vue.config.js中配置：

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
      })

使用：

<template>
	<!-- class markdown-body 必须加，否则标签样式会出现问题 -->
  <div class="markdown-body">
    <markdown />
  </div>
</template>

<script>
// 引入 markdown 文件，引入后是一个组件，需要在 components 中注册
import markdown from 'xxxx.md'
// 代码高亮
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的样式
import 'github-markdown-css'
export default {
  components: {
    markdown
  },
}
</script>

使用这种方法样式正常，而且我引用的本地图片也可以显示出来。