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的解決方案啦，古德拜。