vue-cli3項目展現本地Markdown文件

【版本】

• vue-cli3
• webpack@4.33.0

【步驟】

一、安裝插件vue-markdown-loader

npm i vue-markdown-loader -D

該插件能夠將markdown文件加載成vue組件。
ps：因爲該插件是基於markdown-it的，所以不須要單獨安裝markdown-it。

二、修改vue.config.js配置文件（若是沒有，在項目根目錄新建一個）：

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
      })
  }
}

三、直接上代碼

App.vue

<template>
  <my-markdown></my-markdown>
</template>

<script>
import myMarkdown from './assets/cpu.md';
export default {
  components: {
    myMarkdown
  },
</script>

因爲個人網站是http，而markdown文件中引用的圖片是https，因而在html中加上這個請求頭信息：（視具體狀況增長）

<meta name="referrer" content="no-referrer"/>

正常狀況下，到這裏就結束了。

【動態引入md文件】

App.vue代碼見下：

HTML部分

<section :is="articleComponent"></section>

JS部分

this.$options.components[registerName] = require(`@/assets/articles/${path}.md`).default
this.articleComponent = registerName;

注意，這裏引入語句最後的".default"，根據版本不一樣視狀況決定是否須要。

---

【坑】

因爲需求方給個人Markdown文檔的標題是這樣的：

##物理CPU個數
物理CPU數就是主板上實際插入的CPU數量
……

頁面展現的結果是這樣：

標題並無被正確解析。
折騰了大半天才發現，這是因爲標題的#井號和文字之間沒有空格致使的。證實見下：

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);//重點在這裏！！！
        }
      })
  }
}

這樣就能正確解析了。
不過這只是爲了能快速見效想出來的臨時方案，用兩套markdown解析感受就重複了。有時間再想更好的辦法吧。

END