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;
-
hooks/index.js
, módulo de gatilhoshooks/index.jsimport render from './render' export default nuxtConfig => ({ render: render(nuxtConfig) })
-
hooks/render.js
, gatilho renderhooks/render.jsimport 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)) } } }
-
hooks/route-redirect-portal.js
, O próprio intermédiariohooks/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/blob/2.x-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


















































