fix(bundler-vite): before & after middlewares not working bug (umijs#141)

Author: PeachScript

packages/bundler-vite/src/server/server.ts

@@ -50,23 +50,38 @@ export async function createServer(opts: IOpts) {
     server: { middlewareMode: 'html' },
   });
 
+  // before middlewares
+  opts.beforeMiddlewares?.forEach((m) => app.use(m));
+
+  // after middlewares, insert before vite spaFallbackMiddleware
+  // refer: https://github.com/vitejs/vite/blob/2c586165d7bc4b60f8bcf1f3b462b97a72cce58c/packages/vite/src/node/server/index.ts#L508
+  if (opts.afterMiddlewares?.length) {
+    vite.middlewares.stack.some((s, i) => {
+      if ((s.handle as Function).name === 'viteSpaFallbackMiddleware') {
+        const afterStacks: typeof vite.middlewares.stack =
+          opts.afterMiddlewares!.map((handle) => ({
+            route: '',
+            handle,
+          }));
+
+        vite.middlewares.stack.splice(i, 0, ...afterStacks);
+
+        return true;
+      }
+
+      return false;
+    });
+  }
+
   // use vite via middleware way
   app.use(vite.middlewares);
 
-  // before middlewares
-  (opts.beforeMiddlewares || []).forEach((m) => app.use(m));
-
   // writeToDisk(?)
   // mock
   // prerender
   // bundless
 
-  // after middlewares
-  console.log('test', opts.afterMiddlewares);
-  (opts.afterMiddlewares || []).forEach((m) => app.use(m));
-
   const server = http.createServer(app);
-
   const port = process.env.PORT || 8000;
 
   server.listen(port, async () => {