vue展示md文件（注意版本号）

参照网上的博客会有版本问题，记录一下目前我用的版本

1.下载所需package

npm i vue-markdown-loader -D
npm i vue-loader@14.2.2 -D

npm vue-template-compiler -D (若是已经有则不需要安装，不然有可能和现有的vue版本不匹配从而报错)

vue-loader版本过高会不兼容，经过测试安装14.2.2版本可以使用

vue-template-compiler需要和vue的版本一致

（若是直接安装vue-loader最新版会提示升级vue和vue-compiler,但是升级后的vue没有和vue-template-compiler匹配的版本，所以我选择降低vue-loader版本）

# 样式
npm i github-markdown-css -D
npm i highlight.js -D

2.在vue.config.js配置

module.exports = {
  publicPath: './',
  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
   })
  },
}

3.在页面使用

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

4.js引入

<script>
// 引⼊ markdown ⽂件，引⼊后是⼀个组件，需要在 components 中注册
import markdown from '@/assets/md/Android_MQTT.md'
// 代码⾼亮
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
// 其他元素使⽤ github 的样
export default {
  components: { markdown }
}
</script>