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