A propriedade hooks

Gatilhos são observadores para os eventos do Nuxt que são normalmente são usados dentro dos módulos do Nuxt, porém estão disponíveis dentro do ficheiro nuxt.config.js.

• Tipo: Object

import fs from 'fs'
import path from 'path'

export default {
  hooks: {
    build: {
      done(builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file'
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      }
    }
  }
}

Internamente, gatilhos seguem um padrão de nomeação que usa dois pontos (por exemplo, build:done). Para facilitação da configuração, você pode estruturar eles como um objeto hierárquico quando estiver usando um ficheiro nuxt.config.js (como exemplificado acima) para definir seus próprios gatilhos. Consulte o Interior do Nuxt para ter acesso a informações mais detalhadas de como eles funcionam.

Lista de Gatilhos

• Gatilhos do Nuxt
• Gatilhos do Renderer
• Gatilhos do ModulesContainer
• Gatilhos do Builder
• Gatilhos do Generator

Exemplos

Redirecionar para router.base quando não estiver na raiz

Vamos dizer que você quer servir páginas como /portal ao invés de /.

Isto pode ser um caso estremo, e a finalidade do router.base do nuxt.config.js é para quando um servidor web servir o Nuxt em algum lugar além da raiz do domínio.

Mas em ambiente de desenvolvimento local, acertar o localhost, quando o router.base não é / retorna um 404. No sentido de prevenir isso, você pode definir um gatilho (Hook).

Talvez o redirecionamento não seja o melhor caso de uso para sítio da web em produção, mas isso ajudará você influenciar os gatilhos.

Para começar, você pode mudar o router.base ; Atualize o seu ficheiro nuxt.config.js:

import hooks from './hooks'
export default {
  router: {
    base: '/portal'
  }
  hooks: hooks(this)
}

Depois, crie alguns ficheiros;

1. hooks/index.js, módulo de gatilhos
   hooks/index.js

   import render from './render'
   
   export default nuxtConfig => ({
     render: render(nuxtConfig)
   })
   

2. hooks/render.js, gatilho render
   hooks/render.js

   import redirectRootToPortal from './route-redirect-portal'
   
   export default nuxtConfig => {
     const router = Reflect.has(nuxtConfig, 'router') ? nuxtConfig.router : {}
     const base = Reflect.has(router, 'base') ? router.base : '/portal'
   
     return {
       /**
        * 'render:setupMiddleware'
        * {@link node_modules/nuxt/lib/core/renderer.js}
        */
       setupMiddleware(app) {
         app.use('/', redirectRootToPortal(base))
       }
     }
   }
   

3. hooks/route-redirect-portal.js, O próprio intermédiario
   hooks/route-redirect-portal.js

   /**
    * Intermediário de gatilho do Nuxt para redirecionar de `/` para `/portal` (ou para o que definimos no router.base do nuxt.config.js)
    *
    * Deve ser a mesma versão que o connect
    * {@link node_modules/connect/package.json}
    */
   import parseurl from 'parseurl'
   
   /**
    * Conecta o intermediário para manipular o redirecionamento para Raiz do Contexto da Aplicação Web desejada.
    *
    * Note que a documentação do Nuxt carece de explicação de como usar gatilhos.
    * Isto é um roteador de exemplo para ajudar a explicar.
    *
    * Consulte boas implementações para obter inspiração:
    * - https://github.com/nuxt/nuxt.js/blob/dev/examples/with-cookies/plugins/cookies.js
    * - https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js
    *
    * [http_class_http_clientrequest]: https://nodejs.org/api/http.html#http_class_http_clientrequest
    * [http_class_http_serverresponse]: https://nodejs.org/api/http.html#http_class_http_serverresponse
    *
    * @param {http.ClientRequest} req Node.js internal client request object [http_class_http_clientrequest]
    * @param {http.ServerResponse} res Node.js internal response [http_class_http_serverresponse]
    * @param {Function} next middleware callback
    */
   export default desiredContextRoot =>
     function projectHooksRouteRedirectPortal(req, res, next) {
       const desiredContextRootRegExp = new RegExp(`^${desiredContextRoot}`)
       const _parsedUrl = Reflect.has(req, '_parsedUrl') ? req._parsedUrl : null
       const url = _parsedUrl !== null ? _parsedUrl : parseurl(req)
       const startsWithDesired = desiredContextRootRegExp.test(url.pathname)
       const isNotProperContextRoot = desiredContextRoot !== url.pathname
       if (isNotProperContextRoot && startsWithDesired === false) {
         const pathname = url.pathname === null ? '' : url.pathname
         const search = url.search === null ? '' : url.search
         const Location = desiredContextRoot + pathname + search
         res.writeHead(302, {
           Location
         })
         res.end()
       }
       next()
     }
   

Então, sempre que um colega em desenvolvimento acidentalmente bater em / para alcançar o desenvolvimento do serviço de desenvolvimento web, o Nuxt irá redirecionar automaticamente para /portal