一、首先引入几个解析包
npm install markdown-loader html-loader marked -S --registry=https://registry.npm.taobao.org
【说明:】markdown-loader、html-loader是为了让vue能够解析md格式的文件，读取出来，然后使用marked将读取出来的数据转换成html格式渲染到页面上。使用marked是为了使用更方便。
二、配置 webpack.base.conf.js，如果使用的是 vue-cli 3 以上版本则在vue.config.js中配置
webpack.base.conf.js 配置：在 module > rules 中添加一条规则
module: {
rules: [
// 配置读取 *.md 文件的规则
{
test: /\.md$/,
use: [
{ loader: 'html-loader' },
{ loader: 'markdown-loader', options: {} }
]
}
]
}
vue.config.js 配置：
const path = require("path");
module.exports = {
configureWebpack: {
module: {
rules: [
// 配置读取 *.md 文件的规则
{
test: /\.md$/,
use: [
{ loader: "html-loader" },
{ loader: "markdown-loader", options: {} }
]
}
]
}
}
};
三、使用
在需要使用的地方，引入 marked，再将 md 文档交给它来解析，获得到解析后的 HTML 格式内容，再将解析后的内容渲染到页面上
<template>
<div>
<div>文档</div>
<div v-html="articalContent"></div>
</div>
</template>
<script>
const marked = require("marked");
export default {
data() {
return {
articalContent: ""
};
},
created() {
this.$axios.get("/articles/test.md").then(res => {
const htmlMD = marked(res.data);
this.articalContent = htmlMD;
});
}
};
</script>
四、样式
到现在为止，只是将文档正确解析并显示到了页面上，但是没有任何样式，我们可以再给渲染的内容加上样式，比如使用 github 的样式：
npm install github-markdown-css -S --registry=https://registry.npm.taobao.org
在main.js中将github-markdown-css导入
import 'github-markdown-css';
在相应容器添加markdown_body样式
<div v-html="articalContent" class="markdown-body"></div>
