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

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) => {
e(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);
// e(require('markdown-it-anchor'))
// e(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的解决⽅案啦，古德拜。