diff --git a/packages/cli/package.json b/packages/cli/package.json
index ae181bceef..e2f26b8000 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -136,6 +136,7 @@
     "terser-webpack-plugin": "^5.1.3",
     "util": "^0.12.3",
     "vite": "^4.4.9",
+    "vite-plugin-html-template": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.14.1",
     "vite-plugin-svgr": "^4.0.0",
     "webpack": "^5.70.0",
diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts
index 455c18d3c2..48a020ecf2 100644
--- a/packages/cli/src/lib/bundler/server.ts
+++ b/packages/cli/src/lib/bundler/server.ts
@@ -38,7 +38,7 @@ import { resolveBundlingPaths } from './paths';
 import { ServeOptions } from './types';
 import { nodePolyfills as viteNodePolyfills } from 'vite-plugin-node-polyfills';
 import { esbuildCommonjs, viteCommonjs } from '@originjs/vite-plugin-commonjs';
-import pluginSvgr from 'vite-plugin-svgr';
+import htmlTemplate from 'vite-plugin-html-template';
 import vitePluginSvgr from 'vite-plugin-svgr';
 
 export async function serveBundle(options: ServeOptions) {
@@ -177,23 +177,7 @@ export async function serveBundle(options: ServeOptions) {
         vitePluginSvgr(),
         viteCommonjs(),
         viteNodePolyfills(),
-        {
-          name: 'transform-index-html',
-          configureServer(s) {
-            s.middlewares.use(async (req, res, next) => {
-              if (req.url === '/') {
-                res.end(
-                  await s.transformIndexHtml(
-                    req.url,
-                    await fs.readFile(paths.targetHtml, 'utf-8'),
-                  ),
-                );
-              } else {
-                next();
-              }
-            });
-          },
-        },
+        htmlTemplate(),
       ],
       server: {
         host,