feat!: allow path containing . to fallback to index.html (#14142)

vitejs · Aug 24, 2023 · 1ae4cbd · 1ae4cbd
1 parent 1f214a4
commit 1ae4cbd
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 24 deletions.
diff --git a/packages/vite/src/node/server/middlewares/htmlFallback.ts b/packages/vite/src/node/server/middlewares/htmlFallback.ts
@@ -9,9 +9,10 @@ export function htmlFallbackMiddleware(
   spaFallback: boolean,
 ): Connect.NextHandleFunction {
   const historyHtmlFallbackMiddleware = history({
+    disableDotRule: true,
     logger: createDebugger('vite:html-fallback'),
-    // support /dir/ without explicit index.html
     rewrites: [
+      // support /dir/ without explicit index.html
       {
         from: /\/$/,
         to({ parsedUrl, request }: any) {
@@ -25,6 +26,13 @@ export function htmlFallbackMiddleware(
           return spaFallback ? `/index.html` : request.url
         },
       },
+      // don't rewrite paths ending with .html
+      {
+        from: /\.html$/,
+        to({ request }: any) {
+          return request.url
+        },
+      },
     ],
   })
 

diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
@@ -37,15 +37,19 @@ test('should have no 404s', () => {
 })
 
 test('should get a 404 when using incorrect case', async () => {
-  expect((await fetchPath('icon.png')).status).toBe(200)
-  // won't be wrote to index.html because the url includes `.`
-  expect((await fetchPath('ICON.png')).status).toBe(404)
+  expect((await fetchPath('icon.png')).headers.get('Content-Type')).toBe(
+    'image/png',
+  )
+  // fallback to index.html
+  expect((await fetchPath('ICON.png')).headers.get('Content-Type')).toBe(
+    isBuild ? 'text/html; charset=utf-8' : 'text/html',
+  )
 
-  expect((await fetchPath('bar')).status).toBe(200)
+  expect((await fetchPath('bar')).headers.get('Content-Type')).toBe('')
   // fallback to index.html
-  const incorrectBarFetch = await fetchPath('BAR')
-  expect(incorrectBarFetch.status).toBe(200)
-  expect(incorrectBarFetch.headers.get('Content-Type')).toContain('text/html')
+  expect((await fetchPath('BAR')).headers.get('Content-Type')).toContain(
+    isBuild ? 'text/html;charset=utf-8' : 'text/html',
+  )
 })
 
 describe('injected scripts', () => {

diff --git a/playground/legacy/__tests__/legacy.spec.ts b/playground/legacy/__tests__/legacy.spec.ts
@@ -52,22 +52,22 @@ test('generates assets', async () => {
     () => page.textContent('#assets'),
     isBuild
       ? [
-          'index: 404',
-          'index-legacy: 404',
-          'chunk-async: 404',
-          'chunk-async-legacy: 404',
-          'immutable-chunk: 200',
-          'immutable-chunk-legacy: 200',
-          'polyfills-legacy: 404',
+          'index: text/html; charset=utf-8',
+          'index-legacy: text/html; charset=utf-8',
+          'chunk-async: text/html; charset=utf-8',
+          'chunk-async-legacy: text/html; charset=utf-8',
+          'immutable-chunk: application/javascript',
+          'immutable-chunk-legacy: application/javascript',
+          'polyfills-legacy: text/html; charset=utf-8',
         ].join('\n')
       : [
-          'index: 404',
-          'index-legacy: 404',
-          'chunk-async: 404',
-          'chunk-async-legacy: 404',
-          'immutable-chunk: 404',
-          'immutable-chunk-legacy: 404',
-          'polyfills-legacy: 404',
+          'index: text/html',
+          'index-legacy: text/html',
+          'chunk-async: text/html',
+          'chunk-async-legacy: text/html',
+          'immutable-chunk: text/html',
+          'immutable-chunk-legacy: text/html',
+          'polyfills-legacy: text/html',
         ].join('\n'),
     true,
   )

diff --git a/playground/legacy/immutable-chunk.js b/playground/legacy/immutable-chunk.js
@@ -12,7 +12,7 @@ export function fn() {
   return Promise.all(
     chunks.map(async (name) => {
       const response = await fetch(`/assets/${name}.js`)
-      return `${name}: ${response.status}`
+      return `${name}: ${response.headers.get('Content-Type')}`
     }),
   )
 }
diff --git a/playground/legacy/index.html b/playground/legacy/index.html
@@ -5,7 +5,7 @@ <h1 id="app"></h1>
 <div id="features-after-corejs-3"></div>
 <div id="async-generator"></div>
 <div id="babel-helpers"></div>
-<div id="assets"></div>
+<div id="assets" style="white-space: break-spaces; background: lightgray"></div>
 <button id="dynamic-css-button">dynamic css</button>
 <div id="dynamic-css"></div>
 <p>## worker message:</p>