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 语法的详细内容，希望对大家有用。

以上关于Vue 使用markdown-loader解析引入的 .md 文件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。