vue3引入md文件

原创已于 2024-05-06 22:40:56 修改 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vite #vite-plugin-md

于 2024-04-22 10:56:08 首次发布

本文介绍了如何在基于Vite的Vue3项目中安装并配置vite-plugin-md插件，以解析和显示Markdown文件，包括安装依赖、配置vite.config.js和在页面上使用Markdown组件的方法。

vue3 中使用 vite-plugin-md 解析 md 文档并展示，因为项目是通过 vite 构建的，所以我们使用vite-plugin-md 解析

第一步安装依赖

npm i vite-plugin-md -D

如果报错的话，就换成报错中的vite版本

第二步 vite.config.js中vite-plugin-md 插件配置

import {fileURLToPath,URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'

// https://vitejs.dev/config/  
export default defineConfig({
	plugins: [
		vue({
			include: [/\.vue$/, /\.md$/]
		}),
		Markdown({
			builders: []
		})
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url))
		}
	},
	// 其他配置...  
})

第三步页面调用

<template>  
  <Md />
</template>  
  
<script>  
import { ref, onMounted } from 'vue'  
import axios from 'axios'  
import Md from '../mds/Features.md'  
  
export default {  
  components: {  
    Md
  },  
  setup() {  
    const markdownContent = ref('')  
    onMounted(async () => {  
      try {  
        const response = await axios.get('../mds/Features.md')
        markdownContent.value = response.data  
      } catch (error) {  
        console.error('Error fetching markdown content:', error)  
      }  
    })  
  
    return {  
      markdownContent  
    }  
  }  
}  
</script>