请查看如何使用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

获取 Markdown

遵循

Mode.MARKDOWN

说明：

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

<textarea class="terms" cols="60" rows="40">{{ terms1.markdown }}</textarea>

或

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

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

来自 Markdown 的 HTML

要从 Markdown 生成 HTML，请按照

Mode.HTML

的说明操作：

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

<div v-html="terms1.html" />

或

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

<div v-html="html" />

Vue 组件

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

Mode.VUE

描述：

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

<VueComponent />