Vue 使用markdown-loader解析引入的 .md 文件

前言

刚接到这个需求的时候，在项目中引入 .md 文件，需要对markdown语法进行解析，觉得很简单（的确很简单）但是这玩意的坑真的也让人很无奈。

网上找了很多的资料，要么就是有头没有尾，介绍的不是很详细，都没有写出痛点（这就很难过了）。本人通过实践并且在我们项目中平稳运行，想分享给后面的人，为大家排忧解难，哈哈。

需求

vue项目中可以良好展示markdown（只是展示功能 没有编辑功能）

安装html-loader与markdown-loader

安装html-loader与markdown-loader

npm i html-loader markdown-loader --save

这里注意了！html-loader的版本号不能太新，不然是要报错的。

配置md文件解析规则

package.json同级的目录下找到vue.config.js，没有则新建一个，配置加载md文件的规则，如下：

module.exports = {
  //配置加载md文件时的解析规则
   chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

如果大家嫌样式丑陋，可以安装github-markdown-css

npm install github-markdown-css
import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在main.js

使用方法

<template>
  <div>
    <div class="markdown-body" v-html="md">
    <!-- markdown-body 一定要写这个class名 -->
    </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>

最终效果 打码勿怪

结语

以上就是vue导入.md文件使用markdown-loader解析markdown语法的详细内容，希望对大家有用。