fix(server): handle appType mpa html fallback (#10336)

Co-authored-by: Jiby Jose <[email protected]>
Co-authored-by: bluwy <[email protected]>

packages/vite/src/node/server/index.ts

@@ -53,7 +53,7 @@ import type { WebSocketServer } from './ws'
 import { createWebSocketServer } from './ws'
 import { baseMiddleware } from './middlewares/base'
 import { proxyMiddleware } from './middlewares/proxy'
-import { spaFallbackMiddleware } from './middlewares/spaFallback'
+import { htmlFallbackMiddleware } from './middlewares/htmlFallback'
 import { transformMiddleware } from './middlewares/transform'
 import {
   createDevHtmlTransformFn,
@@ -560,9 +560,9 @@ export async function createServer(
   middlewares.use(serveRawFsMiddleware(server))
   middlewares.use(serveStaticMiddleware(root, server))
 
-  // spa fallback
-  if (config.appType === 'spa') {
-    middlewares.use(spaFallbackMiddleware(root))
+  // html fallback
+  if (config.appType === 'spa' || config.appType === 'mpa') {
+    middlewares.use(htmlFallbackMiddleware(root, config.appType === 'spa'))
   }
 
   // run post config hooks

packages/vite/src/node/server/middlewares/spaFallback.ts → packages/vite/src/node/server/middlewares/htmlFallback.ts

@@ -4,11 +4,12 @@ import history from 'connect-history-api-fallback'
 import type { Connect } from 'dep-types/connect'
 import { createDebugger } from '../../utils'
 
-export function spaFallbackMiddleware(
-  root: string
+export function htmlFallbackMiddleware(
+  root: string,
+  spaFallback: boolean
 ): Connect.NextHandleFunction {
-  const historySpaFallbackMiddleware = history({
-    logger: createDebugger('vite:spa-fallback'),
+  const historyHtmlFallbackMiddleware = history({
+    logger: createDebugger('vite:html-fallback'),
     // support /dir/ without explicit index.html
     rewrites: [
       {
@@ -20,15 +21,17 @@ export function spaFallbackMiddleware(
           if (fs.existsSync(path.join(root, rewritten))) {
             return rewritten
           } else {
-            return `/index.html`
+            if (spaFallback) {
+              return `/index.html`
+            }
           }
         }
       }
     ]
   })
 
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
-  return function viteSpaFallbackMiddleware(req, res, next) {
-    return historySpaFallbackMiddleware(req, res, next)
+  return function viteHtmlFallbackMiddleware(req, res, next) {
+    return historyHtmlFallbackMiddleware(req, res, next)
   }
 }

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -283,7 +283,7 @@ export function indexHtmlMiddleware(
     }
 
     const url = req.url && cleanUrl(req.url)
-    // spa-fallback always redirects to /index.html
+    // htmlFallbackMiddleware appends '.html' to URLs
     if (url?.endsWith('.html') && req.headers['sec-fetch-dest'] !== 'script') {
       const filename = getHtmlFilename(url, server)
       if (fs.existsSync(filename)) {