vite-plugin-markdown配置报错：markdownPlugin不是函数问题求助

问题原因 #

vite-plugin-markdown@2.x版本采用命名导出而非默认导出，若使用默认导入（如import markdownPlugin from 'vite-plugin-markdown'），就会触发markdownPlugin is not a function错误。

解决步骤 #

1. 修正vite.config.ts的插件导入与配置 #

将默认导入改为命名导入，示例配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 采用命名导入方式
import { markdownPlugin } from 'vite-plugin-markdown'

export default defineConfig({
  plugins: [
    vue(),
    markdownPlugin({
      // 根据需求配置渲染模式，可选值：'html'|'markdown'|'toc'
      mode: 'html'
    })
  ],
  resolve: {
    alias: {
      '@': '/src' // 确保配置@别名对应项目src目录
    }
  }
})

2. 添加MD文件类型声明（避免TS报错） #

在项目src目录下创建vite-env.d.ts文件，写入以下内容：

declare module '*.md' {
  const content: string
  export default content
}

3. 在组件中导入并渲染MD内容 #

在Vue组件中直接导入MD文件，通过v-html渲染内容：

<template>
  <div v-html="termsContent"></div>
</template>

<script setup lang="ts">
import termsContent from '@/assets/terms/terms1.md'
</script>

自定义MD渲染（可选） #

如果需要添加代码高亮、自定义排版等功能，可以自定义MarkdownIt实例传入插件：

import MarkdownIt from 'markdown-it'
// 配置自定义渲染规则
const mdInstance = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true
})

// 在插件配置中使用自定义实例
markdownPlugin({
  mode: 'html',
  markdownIt: mdInstance
})

内容的提问来源于stack exchange，提问作者소고기얌