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 字符串