前言
刚接到这个需求的时候，在项目中引入 .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 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 语法的详细内容，希望对大家有用。