vue-cli3项目展示本地Markdown文件的方法

来源：懂视网责编：小采时间：2020-11-27 21:55:31

vue-cli3项目展示本地Markdown文件的方法

vue-cli3项目展示本地Markdown文件的方法:【版本】 vue-cli3 webpack@4.33.0 【步骤】1、安装插件vue-markdown-loader npm i vue-markdown-loader -D ps：这个插件是基于markdown-it的，不需要单独安装markdown-it。 2、修改vue.config.js配置文件（如果没有，在项目根

推荐度：

点击下载本文 文档为doc格式

导读vue-cli3项目展示本地Markdown文件的方法:【版本】 vue-cli3 webpack@4.33.0 【步骤】1、安装插件vue-markdown-loader npm i vue-markdown-loader -D ps：这个插件是基于markdown-it的，不需要单独安装markdown-it。 2、修改vue.config.js配置文件（如果没有，在项目根

得到的结果并不让我满意：

折腾了大半天才发现，这是由于标题的#井号和文字之间没有空格导致的。证明见下：

var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
console.log(md.render('# markdown-it rulezz!'))//<h1>markdown-it rulezz!</h1>
console.log(md.render('#markdown-it rulezz!'))//<p>#markdown-it rulezz!</p>

Fine :)

愚蠢的我想出了一个解决办法：

因为HyperDown.js能避免上面那样的情况，于是我用它来对文档做预处理。

安装HyperDown.js

npm install hyperdown -D

然后把vue.config.js改成了这样。

let HyperDown = require('hyperdown');
let parser = new HyperDown;

module.exports = {
 chainWebpack: config => {
 config.module.rule('md')
 .test(/\.md/)
 .use('vue-loader')
 .loader('vue-loader')
 .end()
 .use('vue-markdown-loader')
 .loader('vue-markdown-loader/lib/markdown-compiler')
 .options({
 // markdown-it config
 preset: 'default',
 breaks: true,
 raw: true,
 typographer: true,
 preprocess: function(markdownIt, source) {
 return parser.makeHtml(source);//重点在这里！！！
 }
 })
 }
}

vue-cli3项目展示本地Markdown文件的方法

推荐度：

点击下载本文 文档为doc格式

标签： ma markdown文件 markdown

热门焦点

vue-cli3项目展示本地Markdown文件的方法

vue-cli3项目展示本地Markdown文件的方法

vue-cli3项目展示本地Markdown文件的方法

最新推荐

猜你喜欢

热门推荐