0.package.json

• new dependency

"dependencies": {
    "marked":"^1.1.1"
  },

• yarn install

1.plugins

• new file : plugins/md.ts

// @ts-nocheck
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) => { // 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()
          }
        })
      },
    ],
    transforms: [{  // 用于 rollup // 插件
      test: context => context.path.endsWith('.md'),
      transform: ({ code }) => mdToJs(code) 
    }]
  }
}

2.vite.config.ts

• new file:vite.config.ts

// @ts-nocheck
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) => { // 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()
          }
        })
      },
    ],
    transforms: [{  // 用于 rollup // 插件
      test: context => context.path.endsWith('.md'),
      transform: ({ code }) => mdToJs(code) 
    }]
  }
}

3.yarn.lock

marked@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npm.taobao.org/marked/download/marked-1.1.1.tgz?cache=0&sync_timestamp=1594690153421&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarked%2Fdownload%2Fmarked-1.1.1.tgz#e5d61b69842210d5df57b05856e0c91572703e6a"
  integrity sha1-5dYbaYQiENXfV7BYVuDJFXJwPmo=

4.使用.md文件

• new file ：src/markdown/install.md

然后使用markdown的语法编辑文件就行了

5.vue中引用.md文件

<template>
    <article class="markdown-body" v-html="md"></article>
</template>

<script>
  import md from '../markdown/install.md'
export default ({
    name:'Install',
    data(){
      return {
        md
      }
    }
})
</script>