routes - 如果目标设置为 'static'，Nuxt.js 路由中间件问题

Question

目标:“静态”和路由器中间件。

您好，我们有一个基于 nuxt v2.4.0 构建的应用程序，它使用模式:'universal'。迁移到 nuxt 2.14.0 后，应用程序继续正常运行。但是，在'yarn generate' 命令执行期间出现警告:

mode option is deprecated. You can safely remove it from nuxt.config

nuxt.config.js 的“路由器”部分是:

  router: {
    trailingSlash : true,
    middleware: 'noroute'
  },

和中间件/noroute.js 文件:

import consola from 'consola'
export default function ({ redirect, route }) {
  consola.log('consola welcomes you')
    if (!route.name) {
      return redirect(302, "/not-found/")
    }
}

要构建应用程序，使用以下命令:

$yarn generate && yarn start

应用完美启动，其行为符合预期。

yarn run v1.22.10
$ nuxt start

 WARN  mode option is deprecated. You can safely remove it from nuxt.config


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.12                     │
   │                                       │
   │   ▸ Environment: production           │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Serving static application from dist/     

当我尝试对不存在的页面执行 HTTP 获取请求时，服务器响应是完美的:

$ curl -I http://localhost:3000/page-that-does-not-exist
HTTP/1.1 302 Found
Location: /not-found/
Date: Fri, 22 Jan 2021 11:00:18 GMT
Connection: keep-alive

到目前为止一切顺利。现在我试图通过将目标添加到 nuxt.config.js 来摆脱 nuxt generate 调用中出现的恼人警告消息:“static”:

export default {
  mode: 'universal',
  target: 'static',
  //ssr: true,
  
  router: {
    trailingSlash : true,
    middleware: 'noroute'
  },
  ...

yarn 生成&& yarn 开始:

$ nuxt start

 WARN  mode option is deprecated. You can safely remove it from nuxt.config                                                                                                                            13:09:25


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.12                     │
   │                                       │
   │   ▸ Environment: production           │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Serving static application from dist/  

但现在 curl 返回 HTTP 状态 200:

$ curl -I http://localhost:3000/page-that-does-not-exist
HTTP/1.1 200 OK
Content-Type: text/html
Date: Fri, 22 Jan 2021 11:10:21 GMT
Connection: keep-alive

看起来路由流程最近发生了变化。

基于 article 中的信息mode: 'universal' 选项等效于 2 个选项 target: 'static' 和 ssr: true (ssr:true 是默认设置的，因此可以省略)。但是，它不是这样工作的。

还有一个不错article关于静态模式部署到 Netlify。它的解决方案也不起作用。

我的问题是:Nuxt.js v2.14.0 的正确配置是什么，它 100% 匹配以前版本中的通用模式，或者，也许是更好的问题:让路由中间件与 target: static 一起工作的正确方法是什么。

感谢任何有助于我解决问题的信息

提前致谢。

Answer 1

mode: 'universal' 等同于 target: 'server' 现在是默认值。

这意味着您可以从 nuxt.config.js 中安全地删除 mode、target 和 ssr 选项如果你想实现服务器端渲染。

更多信息在这里:

• https://nuxtjs.org/docs/2.x/features/deployment-targets