vite-plugin-markdown 出现问题：配置加载错误

Question

为了创建 md 文件并在父组件中使用它，我安装了该包，如下所示。

npm install vite-plugin-markdown --save-dev

我还检查了

package.json

文件，它已正确安装，如下所示。

"vite-plugin-markdown": "^2.2.0",

vite.config.ts

import markdownPlugin from 'vite-plugin-markdown';

export default defineConfig({
    plugins: [vue(), markdownPlugin()],
})

为什么会出现下面的错误？

无法从/home/ecoplanet/dev/yerin/wmuWallet/WmuWalletFronted/vite.config.ts加载配置 3:06:17 PM [vite] markdownPlugin 不是一个函数 3:06:17 PM [vite] 服务器重启失败

希望在父组件中导入如下图，能够很好的显示。

import terms1 from '@/assets/terms/terms1.md';

<template v-if="termsType === 1">
  <textarea class="terms" cols="60" rows="40">{{ terms1 }}</textarea>
</template>

Answer 1

设置

文档建议默认导入所有模式，但实际上，您需要列出您需要的模式。对于 Vue，可能是我提到的三个，但您可以在文档中查看其余的。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { plugin as markdownPlugin, Mode } from "vite-plugin-markdown";

export default defineConfig({
  plugins: [
    vue(),
    markdownPlugin({
      mode: [Mode.MARKDOWN, Mode.HTML, Mode.VUE], // here need define modes
    }),
  ],
});

• 
• .

获取 Markdown

遵循

Mode.MARKDOWN

说明：

import { markdown as Terms1_MARKDOWN } from '@/assets/terms/terms1.md';

<textarea class="terms" cols="60" rows="40">{{ Terms1_MARKDOWN }}</textarea>

来自 Markdown 的 HTML

要从 Markdown 生成 HTML，请按照

Mode.HTML

的说明操作：

import { html as Terms1_HTML } from '@/assets/terms/terms1.md';

<div v-html="Terms1_HTML" />

Vue 组件

使用Vue时，除了HTML之外，你还可以导入Vue组件。按照

Mode.VUE

描述：

import { VueComponent } from '@/assets/terms/terms1.md';

<VueComponent />