vue3 ts vite项目 读取本地markdown文件

前言

项目中有一些md文件，需要在页面中把内容渲染出来， 所以在此记录一下实现的方法

基本使用

一、文件引入

因为本项目使用的vite通过访问vite官网 发现

// 将资源引入为字符串
// 资源可以使用 ?raw 后缀声明作为字符串引入
import shaderString from './shader.glsl?raw'

所以结合自己的业务，使用以下方法就可以读取到本地md文件

import mdData from './mardDown.md?raw'

二、预览引入内容

预览内容的话可以参考 markdown编辑器引入与使用这篇文章，有详细记录

<!-- markdown内容预览 -->
<template>
    <v-md-editor :model-value="previewData" mode="preview"></v-md-editor>
</template>
<script lang="ts" setup>
const previewData = 这里是要预览的markdown数据
</script>

这里是引入markdown编辑器后，更改mode的值，来预览内容。如果不想使用编辑器，仅仅是预览内容的话，可以访问v-md-editor来渲染引入的内容

v-md-editor vue3预览组件