在Vite2+Vue3渲染Markdown文档(亲测有效）

Posted on Edited on In Views:

方法1：自定义 Vite 插件

原版本升级到Vite2之后会报错plugin.configureServer is not a function ，此插件为修改后版本，亲测有效

1、在项目根目录创建 md.ts 文件，填充如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import path from 'path'
import fs from 'fs'
import marked from 'marked'

const mdToJs = str => {
  const content = JSON.stringify(marked(str))
  return `export default ${content}`
}

export function md() {
  return {
    name: 'md', 
    configureServer(){ // 用于开发
      async ({ app }) => {
        app.use(async (ctx, next) => { // koa
          if (ctx.path.endsWith('.md')) {
            ctx.type = 'js'
            const filePath = path.join(process.cwd(), ctx.path)
            ctx.body = mdToJs(fs.readFileSync(filePath).toString())
          } else {
            await next()
          }
        })
      }
    },
    transform(code, id){ // 用于 rollup // 插件
      // 获取文件后缀名
      const fileArr = id.split('.') //根据.分割数组
      const fileType = fileArr[fileArr.length -1]; //取最后一个

      if(/\md$/.test(fileType)){
         return mdToJs(code)
      }
      return
    }
  }
}

2、接着修改 vite.config.ts，引入上面创建的插件

1
2
3
4
5
import {md} from './md';

export default {
  plugins: [md()]
};

3、在使用时，会将导入的 md 文件转换成 js 文件渲染。具体使用示例：

1
2
3
4
5
6
7
8
9
10
11
<template>
	<article v-html="md" />
</template>

<script lang="ts">
import md from './xxx.md'
export default {
setup(){
  return {md}
  }
}

方法2：使用 vite-plugin-markdown

这款第三方插件不仅支持引入并渲染 Markdown 文件，并且支持渲染成各种格式，例入 HTML 字符串、React 或 Vue 的组件等。

1、安装 vite-plugin-markdown

1
npm i vite-plugin-markdown

或

1
yarn add vite-plugin-markdown

2、在 vite.config.ts 中修改：

1
2
3
4
5
6
7
8
9
const mdPlugin = require('vite-plugin-markdown')

export default {
  plugins: [
    mdPlugin.plugin({
      mode: ['html'],
    })
  ]
}

3、配置中传入一个 options，选项对象，支持以下参数：

1
2
3
mode?: ('html' | 'toc' | 'react' | 'vue')[]
markdown?: (body: string) => string
markdownIt?: MarkdownIt | MarkdownIt.Options

4、各个模式下的渲染示例：

4.1 Import Front Matter attributes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: Awesome Title
description: Describe this awesome content
tags:
  - "great"
  - "awesome"
  - "rad"
---
# This is awesome
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

import { attributes } from './contents/the-doc.md';

console.log(attributes) //=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }

4.2 Import compiled HTML (Mode.HTML)

1
2
3
4
import { html } from './contents/the-doc.md';

console.log(html) 
//=> "This is awesomeite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production."

4.3 Import ToC metadata (Mode.TOC)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# vite

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

## Status

## Getting Started

# Notes

import { toc } from './contents/the-doc.md'

console.log(toc)
//=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]

4.4 Import as a React component (Mode.REACT)

1
2
3
4
5
6
7
8
9
10
import React from 'react'
import { ReactComponent } from './contents/the-doc.md'

function MyReactApp() {
  return (
      <div>
          <ReactComponent />
      </div>
	)
}

4.5 Import as a Vue component (Mode.VUE)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <article>
    <markdown-content />
  </article>
</template>

<script>
import { VueComponent } from './contents/the-doc.md'

export default {
  components: {
    MarkdownContent: VueComponent
  }
};
</script>