feat: emit 404.html on build (#729) (#740)

close #729 

Co-authored-by: Kia Ishii <[email protected]>

src/client/app/router.ts

@@ -1,6 +1,6 @@
 import { reactive, inject, markRaw, nextTick, readonly } from 'vue'
 import type { Component, InjectionKey } from 'vue'
-import { PageData } from '../shared'
+import { PageData, notFoundPageData } from '../shared'
 import { inBrowser, withBase } from './utils'
 import { siteDataRef } from './data'
 
@@ -21,15 +21,6 @@ export const RouterSymbol: InjectionKey<Router> = Symbol()
 // matter and is only passed to support same-host hrefs.
 const fakeHost = `http://a.com`
 
-const notFoundPageData: PageData = {
-  relativePath: '',
-  title: '404',
-  description: 'Not Found',
-  headers: [],
-  frontmatter: {},
-  lastUpdated: 0
-}
-
 const getDefaultRoute = (): Route => ({
   path: '/',
   component: null,
@@ -109,7 +100,7 @@ export function createRouter(
         }
       }
     } catch (err: any) {
-      if (!err.message.match(/fetch/)) {
+      if (!err.message.match(/fetch/) && !href.match(/^[\\/]404\.html$/)) {
         console.error(err)
       }
 

src/node/build/build.ts

@@ -49,7 +49,9 @@ export async function build(
       // as JS object literal.
       const hashMapString = JSON.stringify(JSON.stringify(pageToHashMap))
 
-      for (const page of siteConfig.pages) {
+      const pages = ['404.md', ...siteConfig.pages]
+
+      for (const page of pages) {
         await renderPage(
           siteConfig,
           page,

src/node/build/render.ts

@@ -5,7 +5,7 @@ import { pathToFileURL } from 'url'
 import escape from 'escape-html'
 import { normalizePath, transformWithEsbuild } from 'vite'
 import { RollupOutput, OutputChunk, OutputAsset } from 'rollup'
-import { HeadConfig, createTitle } from '../shared'
+import { HeadConfig, PageData, createTitle, notFoundPageData } from '../shared'
 import { slash } from '../utils/slash'
 import { SiteConfig, resolveSiteDataByRoute } from '../config'
 
@@ -52,28 +52,41 @@ export async function renderPage(
   const pageHash = pageToHashMap[pageName.toLowerCase()]
   const pageClientJsFileName = `assets/${pageName}.${pageHash}.lean.js`
 
-  // resolve page data so we can render head tags
-  const { __pageData } = await import(
-    pathToFileURL(path.join(config.tempDir, pageServerJsFileName)).toString()
-  )
-  const pageData = JSON.parse(__pageData)
+  let pageData: PageData
+  let hasCustom404 = true
+
+  try {
+    // resolve page data so we can render head tags
+    const { __pageData } = await import(
+      pathToFileURL(path.join(config.tempDir, pageServerJsFileName)).toString()
+    )
+    pageData = JSON.parse(__pageData)
+  } catch (e) {
+    if (page === '404.md') {
+      hasCustom404 = false
+      pageData = notFoundPageData
+    } else {
+      throw e
+    }
+  }
 
-  let preloadLinks = config.mpa
-    ? appChunk
-      ? [appChunk.fileName]
+  let preloadLinks =
+    config.mpa || (!hasCustom404 && page === '404.md')
+      ? appChunk
+        ? [appChunk.fileName]
+        : []
+      : result && appChunk
+      ? [
+          ...new Set([
+            // resolve imports for index.js + page.md.js and inject script tags
+            // for them as well so we fetch everything as early as possible
+            // without having to wait for entry chunks to parse
+            ...resolvePageImports(config, page, result, appChunk),
+            pageClientJsFileName,
+            appChunk.fileName
+          ])
+        ]
       : []
-    : result && appChunk
-    ? [
-        ...new Set([
-          // resolve imports for index.js + page.md.js and inject script tags for
-          // them as well so we fetch everything as early as possible without having
-          // to wait for entry chunks to parse
-          ...resolvePageImports(config, page, result, appChunk),
-          pageClientJsFileName,
-          appChunk.fileName
-        ])
-      ]
-    : []
 
   let prefetchLinks: string[] = []
 

src/shared/shared.ts

@@ -16,6 +16,15 @@ export const APPEARANCE_KEY = 'vitepress-theme-appearance'
 // @ts-ignore
 export const inBrowser = typeof window !== 'undefined'
 
+export const notFoundPageData: PageData = {
+  relativePath: '',
+  title: '404',
+  description: 'Not Found',
+  headers: [],
+  frontmatter: {},
+  lastUpdated: 0
+}
+
 function findMatchRoot(route: string, roots: string[]): string | undefined {
   // first match to the routes with the most deep level.
   roots.sort((a, b) => {