diff --git a/apps/website-new/docs/en/integrations/build-tool/vite.mdx b/apps/website-new/docs/en/integrations/build-tool/vite.mdx
index 388fc8551ed..5b63cff23ab 100644
--- a/apps/website-new/docs/en/integrations/build-tool/vite.mdx
+++ b/apps/website-new/docs/en/integrations/build-tool/vite.mdx
@@ -29,50 +29,21 @@ import { PackageManagerTabs } from '@theme';
   }}
 />
 
+### Create module-federation.config.ts
+
+Create the `module-federation.config.ts` file with the following content:
+
+import CreateConfig from '@components/common/vite/create-config';
+
+<CreateConfig />
+
 ### Register the Plugin
 
 In `Vite`, you can add the plugin through the `plugins` configuration item in the `vite.config.js` file:
 
-```ts title='vite.config.js'
-import { federation } from '@module-federation/vite';
-module.exports = {
-  server: {
-    origin: 'http://localhost:2000',
-    port: 2000,
-  },
-  base: "http://localhost:2000",
-  plugins: [
-    federation({
-      name: 'vite_provider',
-      manifest: true,
-      remotes: {
-        esm_remote: {
-          type: "module",
-          name: "esm_remote",
-          entry: "https://[...]/remoteEntry.js",
-        },
-        var_remote: "var_remote@https://[...]/remoteEntry.js",
-      },
-      exposes: {
-        './button': './src/components/button',
-      },
-      shared: {
-        react: {
-          singleton: true,
-        },
-        'react/': {
-          singleton: true,
-        },
-      },
-    }),
-  ],
-  // Do you need to support build targets lower than chrome89?
-  // You can use 'vite-plugin-top-level-await' plugin for that.
-  build: {
-    target: 'chrome89',
-  },
-};
-```
+import RegisterPlugin from '@components/common/vite/register-plugin';
+
+<RegisterPlugin />
 
 ## Configure the Build Plugin
 
diff --git a/apps/website-new/docs/zh/integrations/build-tool/vite.mdx b/apps/website-new/docs/zh/integrations/build-tool/vite.mdx
index fc161bf67d4..6530134ffbf 100644
--- a/apps/website-new/docs/zh/integrations/build-tool/vite.mdx
+++ b/apps/website-new/docs/zh/integrations/build-tool/vite.mdx
@@ -29,50 +29,21 @@ import { PackageManagerTabs } from '@theme';
   }}
 />
 
+### 创建 module-federation.config.ts
+
+创建 `module-federation.config.ts` 文件，内容如下：
+
+import CreateConfig from '@components/common/vite/create-config';
+
+<CreateConfig />
+
 ### 注册插件
 
 在 `vite` 中，你可以通过 `vite.config.js` 配置文件中的 `plugins` 配置项来添加插件：
 
-```ts title='vite.config.js'
-import { federation } from '@module-federation/vite';
-module.exports = {
-  server: {
-    origin: 'http://localhost:2000',
-    port: 2000,
-  },
-  base: "http://localhost:2000",
-  plugins: [
-    federation({
-      name: 'vite_provider',
-      manifest: true,
-      remotes: {
-        esm_remote: {
-          type: "module",
-          name: "esm_remote",
-          entry: "https://[...]/remoteEntry.js",
-        },
-        var_remote: "var_remote@https://[...]/remoteEntry.js",
-      },
-      exposes: {
-        './button': './src/components/button',
-      },
-      shared: {
-        react: {
-          singleton: true,
-        },
-        'react/': {
-          singleton: true,
-        },
-      },
-    }),
-  ],
-  // Do you need to support build targets lower than chrome89?
-  // You can use 'vite-plugin-top-level-await' plugin for that.
-  build: {
-    target: 'chrome89',
-  },
-};
-```
+import RegisterPlugin from '@components/common/vite/register-plugin';
+
+<RegisterPlugin />
 
 ## 配置构建插件
 
diff --git a/apps/website-new/src/components/common/vite/create-config.mdx b/apps/website-new/src/components/common/vite/create-config.mdx
new file mode 100644
index 00000000000..563eebc0cb0
--- /dev/null
+++ b/apps/website-new/src/components/common/vite/create-config.mdx
@@ -0,0 +1,27 @@
+```ts title='module-federation.config.ts'
+import { createModuleFederationConfig } from '@module-federation/vite';
+
+export default createModuleFederationConfig({
+  name: 'vite_provider',
+  manifest: true,
+  remotes: {
+    esm_remote: {
+      type: 'module',
+      name: 'esm_remote',
+      entry: 'https://[...]/remoteEntry.js',
+    },
+    var_remote: 'var_remote@https://[...]/remoteEntry.js',
+  },
+  exposes: {
+    './button': './src/components/button',
+  },
+  shared: {
+    react: {
+      singleton: true,
+    },
+    'react/': {
+      singleton: true,
+    },
+  },
+});
+```
diff --git a/apps/website-new/src/components/common/vite/register-plugin.mdx b/apps/website-new/src/components/common/vite/register-plugin.mdx
new file mode 100644
index 00000000000..0bdf7555991
--- /dev/null
+++ b/apps/website-new/src/components/common/vite/register-plugin.mdx
@@ -0,0 +1,18 @@
+```ts title='vite.config.js'
+import { federation } from '@module-federation/vite';
+import mfConfig from './module-federation.config';
+
+module.exports = {
+  server: {
+    origin: 'http://localhost:2000',
+    port: 2000,
+  },
+  base: 'http://localhost:2000',
+  plugins: [federation(mfConfig)],
+  // Do you need to support build targets lower than chrome89?
+  // You can use 'vite-plugin-top-level-await' plugin for that.
+  build: {
+    target: 'chrome89',
+  },
+};
+```