Загрузить файл .md

Webpack не может напрямую загружать файлы .md, но некоторые руководства по блогам или статьям обычно редактируются и управляются с помощью уценки. Это требует от нас выполнения некоторых настроек, чтобы веб-пакет мог загружать файлы .md и отображать их содержимое. веб-страница.

1. Сначала напишите md-загрузчик

Перед этим нам нужно сначала установить markdown-it , создать новый файл md-loader.js и отредактировать код следующим образом.

// md-loader.js
const md = require('markdown-it')()

module.exports = function (source) {
    this.cacheable()

    // source 是原始文件内容，html 是用 markdown-it 编译后的 html 内容
    const html = md.render(source)
    const template = (
        `<template>
            <div class="markdown-body">
                ${html}
            </div>
        </template>`
    )

    return template
}

2. конфигурация веб-пакета

Добавьте конфигурацию в vue.config.js

const path = require('path') // 引入path模块
module.exports = {
    chainWebpack: (config) => {
        config.module.rule('markdown').test(/\.md$/)
            .use('vue-loader')
            .loader('vue-loader')
            .end()
            .use('md-loader')
            .loader(path.resolve(__dirname, './src/loaders/md-loader.js'))
            .end()
    }
}

3. Загрузка .md

Создайте новый md-loader.vue, test.md.

<template>
  <Test />
</template>

<script>
import Test from './test.md'

export default {
  components: {
    Test
  }
}
</script>

На этом этапе файл .md может нормально загружаться и отображаться на веб-странице, но стиль здесь может потребовать некоторых корректировок. Вы можете написать его самостоятельно или процитировать. 

github-markdown.css

выделение-атом-один-light.css

4. Автоматически регистрировать маршруты

Каждый раз, когда мы добавляем сюда файл .md, нам приходится вручную изменять код, чтобы ввести его, что немного хлопотно. Затем мы можем настроить для него автоматическую маршрутизацию. Просто просмотрите все файлы .md в определенной папке, чтобы сгенерировать соответствующий маршрут.

Новые каталоги следующие:

<!-- md-loader/index.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

// router.js
const mdRoutes = []
const md = require.context('md-loader/md', false, /\w+\.(md)$/)
// 遍历 md-loader/md 目录下所有 md 文件, 并生成路由
md.keys().forEach(fileName => {
    const reg = /\.\/(.+).md/
    const name = fileName.match(reg)[1]
    mdRoutes.push({
        path: name,
        name: name,
        component: resolve => require([`md-loader/md/${name}.md`], resolve)
    })
})

export const router = [
    {
        path: '/mdLoader',
        name: 'mdLoader',
        redirect: '/mdLoader/md1', // 重定向到第一篇文章
        component: resolve => require(['md-loader/index.vue'], resolve),
        children: mdRoutes,
    }
]

Теперь откройте  https://127.0.0.1:8080/#/mdLoader и перейдите на https://127.0.0.1:8080/#/mdLoader/md1.