Vue 引入 .md 文件，解析markdown语法

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('md')
            .test(/\.md$/)
            .use('html-loader')
            .loader('html-loader')
            .end()
            .use('markdown-loader')
            .loader('markdown-loader')
            .end()
    }
}

　　

这是 vue.config.js 配置方法

需要安装的依赖：

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

　　

文件里使用

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

<script>
import demo from "../../assets/demo.md";

console.log(demo) 

export default {
  data() {
    return {
      md:demo
    };
  }
};
</script>

<style lang="less" scoped>
// 这里可以约束解析出来后的 markdown 标签样式，如设置 h3{...}
</style>

　　

如果不配置 md  loader ，引入demo.md 后 的console.log() 输出的是一个vue模板解析对象(vue-loader处理后的对象)。 配置后输出的是 将 md 语法解析后的 html 字符串