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 字符串
原文：https://www.cnblogs.com/winyh/p/11934129.html