使用 Vite2+Vue3 渲染Markdown文檔｜8月更文挑戰

大部分使用 Vite2 的開發者遇到的一個問題，就是文檔裏並無相關支持 Markdown 的介紹，那麼若是想要在 Vite 項目中支持 Markdown 引入並渲染，須要怎麼操做？這篇文章將介紹兩種方式。javascript

自定義 Vite 插件

若是去網上相關問題，大部分都是這種方式，就是自定義插件，使得 Vite 支持 Markdown 渲染，具體作法以下：html

在項目根目錄建立 md.js 文件，填充以下內容：前端

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 {
    configureServer: [ // 用於開發
      async ({ app }) => {
        app.use(async (ctx, next) => {
          // 獲取後綴爲 .md 的文件，將他變爲 js 文件
          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();
          }
        });
      },
    ],
    transforms: [{  // 用於 rollup
      test: context => context.path.endsWith('.md'),
      transform: ({ code }) => mdToJs(code)
    }]
  };
}
複製代碼

接着修改 vite.config.js，引入上面建立的插件。vue

import {md} from './md';

export default {
  plugins: [md()]
};
複製代碼

這樣，在使用時，會將導入的 md 文件轉換成 js 文件渲染。具體使用示例：java

<template>
<article v-html="md" />
</template>

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

使用 vite-plugin-markdown

這款第三方插件不只支持引入並渲染 Markdown 文件，而且支持渲染成各類格式，例入 HTML 字符串、React 或 Vue 的組件等。react

安裝 vite-plugin-markdown。web

npm i vite-plugin-markdown
複製代碼

在 vite.config.js 中修改：npm

const mdPlugin = require('vite-plugin-markdown')

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

配置中傳入一個 options，選項對象，支持如下參數：markdown

mode?: ('html' | 'toc' | 'react' | 'vue')[]

markdown?: (body: string) => string

markdownIt?: MarkdownIt | MarkdownIt.Options
複製代碼

各個模式下的渲染示例：app

Import Front Matter attributes

---
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'] }
複製代碼

Import compiled HTML (Mode.HTML)

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

console.log(html) 
//=> "<h1>This is awesome</h1><p>ite 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.</p>"
複製代碼

Import ToC metadata (Mode.TOC)

# 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' },]
複製代碼

Import as a React component (Mode.REACT)

import React from 'react'
import { ReactComponent } from './contents/the-doc.md'

function MyReactApp() {
  return (
    <div>       <ReactComponent />     </div>
}
複製代碼

Import as a Vue component (Mode.VUE)

<template>
  <article>     <markdown-content />   </article>
</template>

<script> import { VueComponent } from './contents/the-doc.md' export default {   components: {     MarkdownContent: VueComponent   } }; </script>
複製代碼

寫在最後

寫做不易，但願能夠得到你的一個「贊」。若是文章對你有用，能夠選擇「收藏」。若有文章有錯誤或建議，歡迎評論指正，謝謝你。❤️