vue使用marked解析markdown文本遇到的坑及解决方法

1. 前言

最近在搭建自己的博客网站 https://lyuanzhi.com，不免遇到了要把markdown文本转化为html代码的问题（这里我把markdown文本全都放在数据库里面了，而不是用文件的形式，这样子方便许多），在进行网上冲浪后，我决定用marked这个插件来实现这个功能。

2. 下载marked及相关依赖

总共有三个东西要下载，markdown-loader、html-loader、marked

npm i markdown-loader marked --save
npm install html-loader@0.5.5

这里注意了！html-loader的版本号不能太新，不然是要报错的（我用的是vue-cli3）

npm i 和 npm install 的区别：

1. 用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉 （但我都是直接进入node_modules下面直接删文件夹的）
2. npm i会帮助检测与当前node版本最匹配的npm包版本号
3. 如果安装报错了npm intall会产生npm-debug.log 文件，npm i不一定有

3. 配置rules

新版本的vue脚手架省去了很多文件，其中就包括整个项目的配置文件。这个官方有讲，如果要进行配置，需要在项目的根目录下面创建一个叫vue.config.js的文件（名字必须叫这个）。下面是我的vue.config.js里面的配置内容：

module.exports = {
	chainWebpack: config => {
		config.module
			.rule('')
			.test(/\.md$/)
			.use('html-loader')
			.loader('html-loader')
			.end()
			.use('markdown-loader')
			.loader('markdown-loader')
			.end()
	}
}

这段代码的意思就是添加了一个rule，用来解析.md的文件。以上代码就是新版本vue脚手架添加规则的方式，和旧版本出入比较大，但好在官方文档给的还算清晰。

4. 使用marked插件

这里贴一段代码吧，代码作用是从后端取出markdown文本解析后渲染到页面上

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

<script>
	export default {
		data() {
			return {
				html: ''
			}
		},
		created() {
			this.$axios({
				method: 'post',
				url: this.$serverUrl + '/abab/abababab',
				params: {
					'abab': this.$route.query.abab
				}
			}).then((res) => {
					// res.data.data里放的就是从后端取出来的markdown文本
					this.html = require('marked')(res.data.data)
			});
		}
	}
</script>

<style>
</style>

其中，marked的使用非常简单，就那一句话

this.html = require('marked')(res.data.data)

5. 总结

以上这些就是我今天在使用marked解析markdown文本时遇到的坑和一些小领悟，简单来说就是，一要注意下载下来的插件的版本和项目匹不匹配，二新版本vue-cli怎么配置rules，三怎么使用marked，希望能帮助到你！