vue3.0中的vite如何引入markdown文件为页面

　　问题

　　现在vue3.0开发可以说有两种模式，一种是vue3.0的，一种是vite，但是两种模式的config.ts虽然有很多类同，但是还是存在了一定的差别，因此，本篇文章就来讲述一下vite如何将markdown文件在路由中使用，并且展示为页面中再项目中使用。

　　解决方案:

　　step1--引入对应依赖文件

　　我们会发现vue3.0或者说vue2.0需要引入的依赖为：vue-loader-v16，vue-markdown-loader, 这两个依赖是只是针对vue的，因此他并不适用与vite。

　　因此我们需要再npm库上找到对应的vite库，这里就不卖关子了，我这里使用的库是vite-plugin-md，vite-plugin-inspect，vite-plugin-pages。

　　step2--让vite支持md文件格式加载，在vite.config.ts中配置

　　step3--通过引入你所需要的高亮样式或者你的markdown代码块处理

　　这里是使用了markdwon的一些高亮样式，以及自定义了代码块demo指令让代码块显示出代码，仅供参考。

　　ps：以下代码是我所使用的md.config.ts

const container = require("markdown-it-container");
const markdownRenderer = require('markdown-it')();

module.exports = (md: any) => {
    md.use(container, 'demo', {
        render: (tokens: any, index: any) => {
            if (tokens[index].nesting === 1) {
                let content = tokens[index + 1].content;
                return `<demo>
                            <template v-slot:view>${content}</template>
                            <template class="highlight" v-slot:highlight >    
                                    `
            } else {
                return `</template></demo>`
            }
        }
    })
};

　　step4--通过vite-plugin-md依赖配置配置你所需要的markdown格式

　　这里就不详细说明markdownItOptions，这里的参数还是建议自己去查看markdownIt的文档进行配置，按照以下步骤，markdown文件就可以在路由中使用了。

　　以下代码块为step2到step4的代码，也是整个vite.config.ts加载markdown的配置，方便大家进行查看。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import markdown from 'vite-plugin-md';
import Inspect from 'vite-plugin-inspect';
import Pages from 'vite-plugin-pages'
const markdownRenderer = require('markdown-it')();
import markdownPrism from 'markdown-it-prism'
// 引入markdwon代码块处理
const mdConfig = require('./src/common/config/md.config');
import path from 'path';
// markdown文件高亮样式
import hljs from 'highlight.js';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            include: [/\.vue$/, /\.md$/], // <--
        }),
        markdown({
            markdownItOptions: {
                html: true,
                linkify: true,
                typographer: true,
                xhtmlOut: true,
                highlight: (str: any, lang: any) => {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return '<pre class="hljs"><code>' +
                                hljs.highlight(lang, str, true).value +
                                '</code></pre>';
                        } catch (__) {
                        }
                    }
                    return '<pre class="hljs"><code>' + markdownRenderer.utils.escapeHtml(str) + '</code></pre>';
                }
            },
            markdownItSetup(md) {
                mdConfig(md);
                // md.use(require('markdown-it-anchor'))
                // md.use(require('markdown-it-prism'))
            },
            wrapperClasses: 'markdown-container',
        }),
        Pages({
            pagesDir: 'pages',
            extensions: ['vue', 'md'],
        }),
        Inspect(),
    ],
})

　　

　　step5--在route中引用markdown文件

　　在route.ts中配置对应的文件路径，就可以进行markdown的文件，最后一步就是试一下如何在浏览器中是否能够正确的访问该路由。

       {
            path: 'markdown',
            name: 'Markdown',
            // @ts-ignore
            component: () => import(/* webpackChunkName: "about" */ '@/components/markdown/markdown.md'),
        },

　　结语

　　一开始接触vite还真不知道怎么去处理，基本上都是没有资料，都是一步步去进行摸索，找资料，这里总结几个面对新东西的时候不知道怎么处理的方法。

　　1. 直接搜索百度，更加直接搜索npm。

　　2. 查看相似库之间的联系。

　　3. 最重要还是动手动手。

　　以上就是我对于vite使用markdown的解决方案啦，古德拜。