渲染MDX 文件Vite + React 项目中集成 MDX，配置 @mdx-js/rollup 插件，实现 MDX 文

1. 初始化 Vite + React 项目

打开命令行，执行：

npm create vite@latest my-mdx-demo -- --template react
cd my-mdx-demo

安装依赖：
```
npm install
```

2. 安装 MDX 相关依赖

npm install @mdx-js/react @mdx-js/rollup

3. 配置 Vite 支持 MDX

编辑 src/vite.config.js（或根目录下的 vite.config.js）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import mdx from '@mdx-js/rollup'

export default defineConfig({
  plugins: [
+   mdx(),
    react()
  ]
})

4. 编写 MDX 文件和自定义组件

src/example.mdx

# Hello, MDX!

这是你的第一个 MDX 文件！

<Demo message="MDX 让内容与组件无缝结合！" />

src/demo.jsx

export default function Demo({ message }) {
  return <div>演示组件：{message}</div>;
}

5. 在 React 中导入并渲染 MDX 文件

src/App.jsx

import React from 'react';
+import Example from './example.mdx';
+import Demo from './demo';
function App() {
+ const components = { Demo };
  return (
+   <Example components={components} />
  );
}

export default App;

src\main.jsx

 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 createRoot(document.getElementById('root')).render(
 <StrictMode>
    <App />
 </StrictMode>,
 )

6. 启动开发服务器

npm run dev

浏览器访问 http://localhost:5173 即可看到渲染效果。

7. 说明与常见问题

通过 @mdx-js/rollup 插件，MDX 文件可像 React 组件一样直接导入。
通过 components 属性可将自定义 React 组件（如 Demo）注入到 MDX 文件中。
若 MDX 文件头部有 frontmatter，可通过 MDX 组件的 props 访问。
如遇 MDX 语法或依赖报错，请检查依赖版本与 vite.config.js 配置。

渲染MDX 文件

1. 初始化 Vite + React 项目

2. 安装 MDX 相关依赖

3. 配置 Vite 支持 MDX

4. 编写 MDX 文件和自定义组件

5. 在 React 中导入并渲染 MDX 文件

6. 启动开发服务器

7. 说明与常见问题

8. 参考