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,希望能帮助到你!