在vite项目中展示markdown文件

由于vite不是基于webpack的，所以不能通过引入loader的方式实现加载markdown

所以我们需要自制一个vite插件，将md文件转化为js文件

1. 创建md.js(或md.ts)

在项目根目录下创建plugins文件夹并在其中创建md.js(或md.ts)

⚠️ 在 import marked from 'marked'之前我们需要npm intsall marked

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) => { 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. 引入md.js配置vite

根目录下新建vite.config.js，代码如下

import {md} from './plugins/md'; export default { plugins: [md()] }

⚠️ 配置vite后记得重启之后才能生效

3. 在vue文件中引入并展示md文件

<template> <article v-html="markdown"></article> </temple> <script> import markdown from '../markdown.md' export default { data() { return { markdown } } } </script>