vite解析md文件

让md文件能和vue组件一样使用

先把基本的插件装一下

用来解析

然后写一个vite的插件

const fileRegex = /\.(md)$/

//将md文件解析成vue能识别的组件
const compileSFC = require('@vue/compiler-sfc');
const compileDOM = require('@vue/compiler-dom')

//解析md文件
const Hyperdown = require('hyperdown');

export default function myPlugin() {
    return {
        //插件名字
        name: 'markdown-loader',
        transform(src, id) {
            //判断是不是md结尾的文件
            if (fileRegex.test(id)) {
                //将md文件内容转成html，这个转换的插件也是可以自己写
                let hyperdown = new Hyperdown();
                let html = hyperdown.makeHtml(src);

                //生成vue能解析的格式
                const ret = compileSFC.parse(`<template><div>${html}</div></template>`);
                const code = compileDOM.compile(ret.descriptor.template.content, { mode: 'module' }).code;
                const render = `${code};
                let __script = {};
                __script.render = render;
                  export default __script;`
                return {
                    code: render,
                    map: null
                }
            }
        },
    }
}

然后在vite.config.ts中使用

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
import markdownLoader from './viteApi/markdownLoader'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [markdownLoader(), vue(), ViteComponents({
    customComponentResolvers: [AntDesignVueResolver()],
  })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'type': path.resolve(__dirname, './src/type')
    }
  }
})

这样就可以将md文件当成组件使用了