在Vue3+TS+Vite项目中引入Markdown文件

直接引入Markdown文件需自制Vite插件

在项目根目录创建plugins/md.ts

// md.ts
import marked from 'marked'
import path from 'path'
import fs from 'fs'

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: [
            {
                test: (context) => context.path.endsWith('.md'),
                transform: ({ code }) => mdToJs(code),
            },
        ],
    }
}

由于md.ts引用了marked，所以要安装marked yarn add --dev marked或npm i -D marked

这时发现md.ts第二、三行报错，显示“模块 ""path"" 只能在使用 "esModuleInterop" 标志时进行默认导入ts(1259)”和“模块“"fs"”没有默认导出。ts(1192)”。

解决报错只需在tsconfig.json中加上一行代码

{
    "compilerOptions": {
        // 加上这行就能解决报错
        "allowSyntheticDefaultImports": true
	},
}

创建完md.ts后，在根目录新建vite.config.ts

// 引入md.ts
import { md } from './plugins/md'
// 导出插件
export default {
    plugins: [md],
}