vue2项目中解析md文件

1 引入插件

npm install vue-markdown --save-dev
npm install  vue-markdown-loader 
npm install  github-markdown-css  // 样式
npm install  highlight.js 

2 在vue.config.js中添加配置

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 在main.js中引入vue-markdown全局使用

import VueMarkdown from 'vue-markdown';
Vue.use(VueMarkdown);

4 页面引入

        <vue-markdown ref="mdRef" :source="markdownContent"></vue-markdown>

//引入 vueMarkdown
<script>

import VueMarkdown from 'vue-markdown';
export default {
  components: {
    VueMarkdown // 注入组件
  },
 data() {
    return{
      markdownContent:'',
   }
  },
methods:{
     getMarkData(){
        let url =  `/markdown/hostTasks.md`
        Axios.get(url).then((response) => {
          this.markdownContent = response.data;
      })
  }
}
</script>