小編給大家分享一下vue-cli3項(xiàng)目展示本地Markdown文件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括藁城網(wǎng)站建設(shè)、藁城網(wǎng)站制作、藁城網(wǎng)頁(yè)制作以及藁城網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，藁城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到藁城省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

【版本】

• vue-cli3

• webpack@4.33.0

【步驟】1、安裝插件vue-markdown-loader

npm i vue-markdown-loader -D

ps：這個(gè)插件是基于markdown-it的，不需要單獨(dú)安裝markdown-it。

2、修改vue.config.js配置文件（如果沒(méi)有，在項(xiàng)目根目錄新建一個(gè)）：

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({
    raw: true
   })
 }
}

3、直接上代碼

App.vue

正常情況下，到這里就結(jié)束了。

【坑】

由于業(yè)務(wù)給我的Markdown文檔的標(biāo)題是這樣的：

##物理CPU個(gè)數(shù)
物理CPU數(shù)就是主板上實(shí)際插入的CPU數(shù)量
……

得到的結(jié)果并不讓我滿意：

折騰了大半天才發(fā)現(xiàn)，這是由于標(biāo)題的#井號(hào)和文字之間沒(méi)有空格導(dǎo)致的。證明見(jiàn)下：

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

Fine :)

愚蠢的我想出了一個(gè)解決辦法：

因?yàn)镠yperDown.js能避免上面那樣的情況，于是我用它來(lái)對(duì)文檔做預(yù)處理。

安裝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);//重點(diǎn)在這里?。?！
    }
   })
 }
}

以上是“vue-cli3項(xiàng)目展示本地Markdown文件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！