fix: adjust history fallback

- avoid swallowing 404 of import requests - let static middleware handle existing html pages first fix #193
vitejs · May 20, 2020 · ba614ef · ba614ef
1 parent fb86f0a
commit ba614ef
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 48 deletions.
diff --git a/src/node/server/serverPluginHtml.ts b/src/node/server/serverPluginHtml.ts
@@ -26,12 +26,12 @@ export const htmlPlugin: ServerPlugin = ({
   // inject __DEV__ and process.env.NODE_ENV flags
   // since some ESM builds expect these to be replaced by the bundler
   const devInjectionCode =
-    `\n<script>\n` +
+    `\n<script type="module">\n` +
+    `import "${hmrClientPublicPath}"\n` +
     `window.__DEV__ = true\n` +
     `window.__BASE__ = '/'\n` +
     `window.process = { env: { NODE_ENV: 'development' }}\n` +
-    `</script>` +
-    `\n<script type="module" src="${hmrClientPublicPath}"></script>\n`
+    `</script>\n`
 
   const scriptRE = /(<script\b[^>]*>)([\s\S]*?)<\/script>/gm
   const srcRE = /\bsrc=(?:"([^"]+)"|'([^']+)'|([^'"\s]+)\b)/
@@ -73,7 +73,7 @@ export const htmlPlugin: ServerPlugin = ({
 
     const { path } = ctx
 
-    if (isHtml(path)) {
+    if (ctx.response.is('html')) {
       if (rewriteHtmlPluginCache.has(path)) {
         debug(`${path}: serving from cache`)
         ctx.body = rewriteHtmlPluginCache.get(path)
@@ -89,7 +89,7 @@ export const htmlPlugin: ServerPlugin = ({
 
   watcher.on('change', (file) => {
     const path = resolver.fileToRequest(file)
-    if (isHtml(path)) {
+    if (path.endsWith('.html')) {
       rewriteHtmlPluginCache.del(path)
       debug(`${path}: cache busted`)
       watcher.send({
@@ -101,7 +101,3 @@ export const htmlPlugin: ServerPlugin = ({
     }
   })
 }
-
-function isHtml(path: string): boolean {
-  return path.endsWith('.html')
-}
diff --git a/src/node/server/serverPluginServeStatic.ts b/src/node/server/serverPluginServeStatic.ts
@@ -1,4 +1,3 @@
-import path from 'path'
 import { ServerPlugin } from '.'
 
 const send = require('koa-send')
@@ -20,8 +19,36 @@ export const serveStaticPlugin: ServerPlugin = ({
     return next()
   })
 
+  if (!config.serviceWorker) {
+    app.use(async (ctx, next) => {
+      await next()
+      // the first request to the server should never 304
+      if (seenUrls.has(ctx.url) && ctx.fresh) {
+        ctx.status = 304
+      }
+      seenUrls.add(ctx.url)
+    })
+  }
+  app.use(require('koa-etag')())
+
+  app.use((ctx, next) => {
+    const redirect = resolver.requestToFile(ctx.path)
+    if (!redirect.startsWith(root)) {
+      // resolver resolved to a file that is outside of project root,
+      // manually send here
+      return send(ctx, redirect, { root: '/' })
+    }
+    return next()
+  })
+
+  app.use(require('koa-static')(root))
+
   // history API fallback
   app.use((ctx, next) => {
+    if (ctx.status !== 404) {
+      return next()
+    }
+
     if (ctx.method !== 'GET') {
       debug(`not redirecting ${ctx.url} (not GET)`)
       return next()
@@ -38,48 +65,12 @@ export const serveStaticPlugin: ServerPlugin = ({
       return next()
     }
 
-    if (!(accept.includes('text/html') || accept.includes('*/*'))) {
+    if (!accept.includes('text/html')) {
       debug(`not redirecting ${ctx.url} (not accepting html)`)
       return next()
     }
 
-    const ext = path.extname(ctx.path)
-    if (ext === '.html') {
-      debug(`not redirecting ${ctx.url} (is html page)`)
-      return next()
-    }
-
-    if (ext && !accept.includes('text/html')) {
-      debug(`not redirecting ${ctx.url} (has file extension)`)
-      return next()
-    }
-
     debug(`redirecting ${ctx.url} to /index.html`)
-    ctx.url = '/index.html'
-    return next()
+    return send(ctx, `/index.html`)
   })
-
-  if (!config.serviceWorker) {
-    app.use(async (ctx, next) => {
-      await next()
-      // the first request to the server should never 304
-      if (seenUrls.has(ctx.url) && ctx.fresh) {
-        ctx.status = 304
-      }
-      seenUrls.add(ctx.url)
-    })
-  }
-  app.use(require('koa-etag')())
-
-  app.use((ctx, next) => {
-    const redirect = resolver.requestToFile(ctx.path)
-    if (!redirect.startsWith(root)) {
-      // resolver resolved to a file that is outside of project root,
-      // manually send here
-      return send(ctx, redirect, { root: '/' })
-    }
-    return next()
-  })
-
-  app.use(require('koa-static')(root))
 }