Quasar CLI with Vite - @quasar/app-vite
SSR处理404和500错误

SSR上404和500错误的处理方式与其他模式(例如SPA)略有不同。 如果您检查/src-ssr/middlewares/render.js(这是您的生产版本WEB服务器),则会注意到以下部分:

export default ({ app, resolve, render, serve }) => {
   // 我们捕获任何其他Express路由,并将其
   // 交给Vue和Vue Router来渲染我们的页面
  app.get(resolve.urlPath('*'), (req, res) => {
    res.setHeader('Content-Type', 'text/html')

    render({ req, res })
      .then(html => {
        // 现在让我们把渲染好的html发送到客户端
        res.send(html)
      })
      .catch(err => {
        // 哎呀,我们在渲染页面时出现了错误

        // 我们被告知要重定向到另一个URL
        if (err.url) {
          if (err.code) {
            res.redirect(err.code, err.url)
          }
          else {
            res.redirect(err.url)
          }
        }
        // 呃, Vue Router找不到请求的路由
        else if (err.code === 404) {
          // 只有在/src/routes中没有定义"全能"路由
          // 的情况下才会到达这里。
          res.status(404).send('404 | Page Not Found')
        }
        // 好吧,我们把任何其他代码都当作错误。
        // 如果我们处于开发模式,那么我们可以使用Quasar CLI
        // 来显示一个漂亮的错误页面,其中包含堆栈
        // 和其他有用的信息
        else if (process.env.DEV) {
          // serve.error仅在开发模式下可用
          serve.error({ err, req, res })
        }
        // 我们是在生产中,所以当我们遇到错误时,
        // 我们应该有另一种方法来向客户端显示一些东西
        //(出于安全原因,显示与开发中
        // 相同的大量信息是不行的)
        else {
          // 在生产中渲染错误页面
          // 或为错误页面创建一个路由(/src/routes)并重定向到它
          res.status(500).send('500 | Internal Server Error')
        }
      })
  })
}

上面的部分是在捕捉到其他可能的请求(如对/public文件夹、manifest.json和service worker等)后写的。这就是我们用Vue和Vue Router渲染页面的地方。

要注意的事情

我们将讨论您需要注意的一些体系结构决策。 选择最适合您的应用的内容。

错误404

如果您在Vue路由/src/router/routes.js文件中定义了等效的404路由(如下所示),则上述示例中的if (err.code === 404) {永远不会是 true,因为Vue Router已经处理了它。

// 使用Vue路由捕获404的路由示例
{ path: '/:catchAll(.*)*', component: () => import('pages/Error404.vue') }

错误500

在页面顶部的/src-ssr/middlewares/render.js示例中,请注意,如果web服务器遇到任何呈现错误,我们会向客户端发送一个简单的字符串(“500 | Internal Server Error”)。 如果要显示一个漂亮的页面,则可以:

  1. /src/router/routes.js中添加特定的路由,例如:
{ path: 'error500', component: () => import('pages/Error500.vue') }
  1. 编写Vue组件以处理此页面。 在这个例子中,我们创建/src/pages/Error500.vue
  2. 然后在/src-ssr/middlewares/render.js中:
if (err.url) { ... }
else if (err.code === 404) { ... }
else {
  // 这里我们获得500错误;
  // 我们将重定向到在步骤#1中新定义的“error500”路由。
  res.redirect(resolve.urlPath('/error500')) // 不过,还是要记下publicPath!
}

WARNING

唯一值得注意的是,您需要确保在渲染“/error500”路由时不会再出现500错误,这会使您的应用陷入无限循环!

避免这种情况的理想方法是直接从/src-ssr/middlewares/render.js返回错误500页面的HTML(作为String):

res.status(500).send(`<html>....</html>`)