Vite
在 Vite 中使用 Fumadocs MDX
安装
🌐 Setup
安装
🌐 Installation
npm i fumadocs-mdx fumadocs-core @types/mdx创建配置文件:
🌐 Create the configuration file:
import { defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
dir: 'content/docs',
});添加 Vite 插件:
🌐 Add the Vite plugin:
import { defineConfig } from 'vite';
import mdx from 'fumadocs-mdx/vite';
import * as MdxConfig from './source.config';
export default defineConfig({
plugins: [
mdx(MdxConfig),
// ...
],
});Setup an import alias (recommended):
{
"compilerOptions": {
"paths": {
"fumadocs-mdx:collections/*": [".source/*"]
}
}
}你可能需要为路径别名配置 vite-tsconfig-paths 插件。
与 Fumadocs 集成
🌐 Integrate with Fumadocs
要与 Fumadocs 集成,请创建一个 lib/source.ts 文件:
🌐 To integrate with Fumadocs, make a lib/source.ts file:
import { docs } from 'fumadocs-mdx:collections/server';
import { loader } from 'fumadocs-core/source';
export const source = loader({
baseUrl: '/docs',
source: docs.toFumadocsSource(),
});当你运行开发服务器或生产构建时,将生成 .source 文件夹。
🌐 The .source folder will be generated when you run development server or production build.
完成
🌐 Done
你现在可以在 content/docs 文件夹中编写内容。
🌐 You can now write content in content/docs folder.
下一步是什么?
🌐 What is Next?
Last updated on
