nuxt.js之serverMiddleware的使用（踩坑）之

nuxt.js 官网 https://zh.nuxtjs.org/
serverMiddleware方法: https://zh.nuxtjs.org/api/configuration-servermiddleware

使用serverMiddleware的目的：

使用过express，koa等node框架的小伙伴相信都会知道中间件的作用。

• 不知道怎么使用的看这里：
• express: http://expressjs.com/en/4x/api.html#app.use
• koa2: https://koa.bootcss.com/

在项目中，我想要在页面渲染之前来控制一些操作，请注意这个页面渲染之前不是指浏览器中的事件，而是服务端html模板和数据组装前；
比如我要在终端输出当前client端发起的请求及相应时间和状态，并根据其做优化处理，我可以引入morgan模块（地址:https://www.npmjs.com/package/morgan），然后在nuxt.config.js中

const logger = require('morgan');
serverMiddleware: [
    logger('dev')
]

然后通过终端即可看到如下显示

GET / 200 190.107 ms - 101022
GET /register 200 94.172 ms - 106428

使用方法：

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') }
  ]
}

nuxt加载中间件的源码：

 // Add user provided middleware
    for (const m of this.options.serverMiddleware) {
      this.useMiddleware(m);
    }

  useMiddleware(middleware) {
    let handler = middleware.handler || middleware;

    // Resolve handler setup as string (path)
    if (typeof handler === 'string') {
      try {
        const requiredModuleFromHandlerPath = this.nuxt.resolver.requireModule(handler);

        // In case the "handler" is not derived from an object but is a normal string, another object with
        // path and handler could be the result

        // If the required module has handler, treat the module as new "middleware" object
        if (requiredModuleFromHandlerPath.handler) {
          middleware = requiredModuleFromHandlerPath;
        }

        handler = requiredModuleFromHandlerPath.handler || requiredModuleFromHandlerPath;
      } catch (err) {
        consola.error(err);
        // Throw error in production mode
        if (!this.options.dev) {
          throw err
        }
      }
    }

    // Resolve path
    const path = (
      (middleware.prefix !== false ? this.options.router.base : '') +
      (typeof middleware.path === 'string' ? middleware.path : '')
    ).replace(/\/\//g, '/');

    // Use middleware
    this.app.use(path, handler);
  }

    // Create new connect instance
    this.app = connect();

在此我们看到中间件其实是通过this.app.use加载的，但是……
让我们充满期待的去看看 this.app 是谁……

注：我的项目是基于koa创建的

    const connect = _interopDefault(require('connect'));
    // Create new connect instance
    this.app = connect();

终于知道为什么我写的中间件为什么一直报错
我的中间件模式(koa中间件语法)：

module.exports = async (ctx,next) => {
  //...others code
}

修改后：

module.exports = (req, res, next) => {
  // ...others code
};

不错，不能使用async,想哭……

如果有好心人发现serverMiddleware可以使用koa的语法写，请多多指教😭