Categories: Nuxt.js 教程

Nuxt.js 服务器端渲染中间件(serverMiddleware) 属性

服务器端渲染中间件(serverMiddleware) 属性

  • 类型: ArrayItems: String 或 Object 或 Function

Nuxt在内部创建一个连接实例,所以我们可以将我们的中间件注册到它的堆栈,并有机会提供更多的路由,如API,而无需外部服务器。因为连接本身是一个中间件,所以注册的中间件既可以用于nuxt start,也可以用作具有编程用法的中间件,如express-template。Nuxt 
Modules还可以使用this.addServerMiddleware()设置serverMiddleware。

服务器端渲染中间件(serverMiddleware) vs 中间件(middleware)!

不要将它与客户端或SSR中Vue在每条路由之前调用的routes middleware混淆。serverMiddleware只是在vue-server-renderer之前在服务器端运行,可用于服务器特定的任务,如处理API请求或服务资产。

用法

如果中间件是String,Nuxt.js将尝试自动解析它。

例如 (nuxt.config.js):

import serveStatic from serve-static

export default {
  serverMiddleware: [
    // Will register redirect-ssl npm package
    redirect-ssl,

    // Will register file from project api directory to handle /api/* requires
    { path: /api, handler: ~/api/index.js },

    // We can create custom instances too
    { path: /static2, handler: serveStatic(__dirname + /static2) }
  ]
}

提示! 如果您不希望中间件注册所有路由,则必须使用具有特定路径的`object`,否则nuxt默认处理程序将不起作用!

自定义服务器端渲染中间件 (Server Middleware)

编写自定义中间件也是可能的。有关更多信息,请参阅 Connect Docs.

Middleware (api/logger.js):

export default function (req, res, next) {
  // req 是 Node.js http request 对象
  console.log(req.path)

  // res 是 Node.js http response 对象

  // next是一个调用下一个中间件的函数
  // 如果您的中间件不是最终执行,请不要忘记在最后调用next!
  next()
}

Nuxt 配置 (nuxt.config.js):

serverMiddleware: [
  ~/api/logger
]

冒牌SEO

前端开发者,欢迎大家一起沟通和交流。

Share
Published by
冒牌SEO

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

4 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago