目錄

• 自定義 Vite 外掛
  
• 使用 vite-plugin-markdown
  
• Import www.cppcns.comFront Matter attributes
  
• Import compiled HTML (Mode.HTML)
  
• Import ToC metadata (Mode.TOC)
  
• Import as a React component (Mode.REACT)
  
• Import as a component (Mode.VUE)
  
• 寫在最後
  

大部分使用 Vite2 的開發者遇到的一個問題，就是文件裡並沒有相關支援 Markdown 的介紹，那麼如果想要在 Vite 專案中支援 Markdown 引入並渲染，需要怎麼操作？這篇文章將介紹兩種方式。

自定義 Vite 外掛

如果去網上相關問題，大部分都是這種方式，就是自定義外掛，使得 Vite 支援 Markdown 渲染，具體做法如下：

在專案根目錄建立 md. 檔案，填充如下內容：

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，引入上面建立的外掛。

import {md} from './md';

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

這樣，在使用時，會將匯入的 md 檔案轉換成 js 檔案渲染。具體使用示例：

<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 的元件等。
安裝 vite-plugin-markdown。

npm i vite-plugin-markdown

在 vite.config.js 中修改：

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

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

配置中傳入一個 options，選項物件，支援以下引數：

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

markdown?: (body: string) => string

markdownIt?: MarkdownIt | MarkdownIt.Options

各個模式下的渲染示例：

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' },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>
  <www.cppcns.comarticle>
    <markdown-content />
  </article>
</template>

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

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

寫在最後

到此這篇關於使用Vite2+Vue3渲染Markdown文件的方法實踐的文章就介紹到這了,更多相關Vite2+Vue3渲染Markdown內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！