在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>

使用這種方法樣式正常，而且我引用的本地圖片也可以顯示出來。