vue项目引入md文件

1. 安装相关依赖

npm i html-loader markdown-loader --save

需要注意的是，请安装一些稳定的版本，避免报错

{
	"html-loader": "^1.3.0",
	"markdown-loader": "^5.1.0"
}

2. 配置md文件解析规则

vue.config.js 中增加配置加载md文件的规则，如果没有则在项目根目录下新建该配置。

// All configuration item explanations can be find in 
// https://cli.vuejs.org/config/
module.exports = {
	// 会接收一个基于 webpack-chain 的 ChainableConfig 实例。
	// 允许对内部的 webpack 配置进行更细粒度的修改。
	chainWebpack: config => {
		// use show markdown file
	    config.module
	      .rule('md')
	      .test(/\.md$/)
	      .use('html-loader')
	      .loader('html-loader')
	      .end()
	      .use('markdown-loader')
	      .loader('markdown-loader')
	      .end();
	}
}

3. 引入md文件

read.md 文件，存放在src目录中

# 我就是md文件

vue文件

<template>
	<div v-html="msg" />
</template>

<script>
//	静态加载
import Md from '@/md/read.md'

export default {
	data() {
		return {
			msg: ''
		}
	},
	created() {
		console.log(Md)
	},
	methods: {
		//	动态加载
		loadMd() {
			const str = 'read.md';
			try {
				//	用 require 而不是 import
		        const mdFile = require(`@/md/${str}`);
		        console.log(mdFile);
		        this.msg = mdFile;
		     } catch (err) {
		        console.log(err);
		     }
		}
	}
}
</script>

提供动态和静态加载md文件两种方法

控制台输出

原生样式很丑，建议自行处理css