Nuxt3启动/构建流程 生命周期钩子执行顺序

相关文档

https://v3.nuxtjs.org/guide/going-further/hooks (opens new window)

https://v3.nuxtjs.org/api/advanced/hooks (opens new window)

schema source code (opens new window)

实现

在nuxt.config.ts中加入

// 注册所有启动/构建相关的钩子函数
export default defineNuxtConfig({
  hooks: {
    // Kit
    'kit:compatibility': () => console.log('kit:compatibility'),

    // nuxt
    'app:resolve': () => console.log('app:resolve'),
    'app:templates': () => console.log('app:templates'),
    'app:templatesGenerated': () => console.log('app:templatesGenerated'),
    'builder:generateApp': () => console.log('builder:generateApp'),
    'pages:extend': () => console.log('pages:extend'),
    'build:manifest': () => console.log('build:manifest'),

    // Auto imports
    'imports:sources': () => console.log('imports:sources'),
    'imports:extend': () => console.log('imports:extend'),
    'imports:dirs': () => console.log('imports:dirs'),

    // Components
    'components:dirs': () => console.log('components:dirs'),
    'components:extend': () => console.log('components:extend'),

    // @nuxt/builder
    'build:before': () => console.log('build:before'),
    'builder:prepared': () => console.log('builder:prepared'),
    'builder:extendPlugins': () => console.log('builder:extendPlugins'),
    'build:templates': () => console.log('build:templates'),
    'build:extendRoutes': () => console.log('build:extendRoutes'),
    'build:done': () => console.log('build:done'),
    'watch:restart': () => console.log('watch:restart'),
    'builder:watch': () => console.log('builder:watch'),

    // nitropack
    'nitro:config': () => console.log('nitro:config'),
    'nitro:init': () => console.log('nitro:init'),
    'nitro:build:before': () => console.log('nitro:build:before'),

    // @nuxt/cli
    'generate:cache:ignore': () => console.log('generate:cache:ignore'),
    'config': () => console.log('config'),
    'run:before': () => console.log('run:before'),

    // nuxi
    'build:error': () => console.log('build:error'),
    'prepare:types': () => console.log('prepare:types'),

    // @nuxt/core
    'ready': () => console.log('ready'),
    'close': () => console.log('close'),
    'modules:before': () => console.log('modules:before'),
    'modules:done': () => console.log('modules:done'),

    // @nuxt/server
    'render:before': () => console.log('render:before'),
    'render:setupMiddleware': () => console.log('render:setupMiddleware'),
    'render:errorMiddleware': () => console.log('render:errorMiddleware'),
    'render:done': () => console.log('render:done'),
    'listen': () => console.log('listen'),
    'server:nuxt:renderLoading': () => console.log('server:nuxt:renderLoading'),
    'render:route': () => console.log('render:route'),
    'render:routeDone': () => console.log('render:routeDone'),
    'render:beforeResponse': () => console.log('render:beforeResponse'),

    // @nuxt/vue-renderer
    'render:resourcesLoaded': () => console.log('render:resourcesLoaded'),
    'vue-renderer:context': () => console.log('vue-renderer:context'),
    'vue-renderer:spa:prepareContext': () => console.log('vue-renderer:spa:prepareContext'),
    'vue-renderer:spa:templateParams': () => console.log('vue-renderer:spa:templateParams'),
    'vue-renderer:ssr:prepareContext': () => console.log('vue-renderer:ssr:prepareContext'),
    'vue-renderer:ssr:context': () => console.log('vue-renderer:ssr:context'),
    'vue-renderer:ssr:csp': () => console.log('vue-renderer:ssr:csp'),
    'vue-renderer:ssr:templateParams': () => console.log('vue-renderer:ssr:templateParams'),

    // @nuxt/webpack
    'webpack:config': () => console.log('webpack:config'),
    'webpack:devMiddleware': () => console.log('webpack:devMiddleware'),
    'webpack:hotMiddleware': () => console.log('webpack:hotMiddleware'),
    'build:compile': () => console.log('build:compile'),
    'build:compiled': () => console.log('build:compiled'),
    'build:resources': () => console.log('build:resources'),
    'server:devMiddleware': () => console.log('server:devMiddleware'),
    'bundler:change': () => console.log('bundler:change'),
    'bundler:error': () => console.log('bundler:error'),
    'bundler:done': () => console.log('bundler:done'),
    'bundler:progress': () => console.log('bundler:progress'),

    // @nuxt/generator
    'generate:before': () => console.log('generate:before'),
    'generate:distRemoved': () => console.log('generate:distRemoved'),
    'generate:distCopied': () => console.log('generate:distCopied'),
    'generate:route': () => console.log('generate:route'),
    'generate:page': () => console.log('generate:page'),
    'generate:routeCreated': () => console.log('generate:routeCreated'),
    'generate:extendRoutes': () => console.log('generate:extendRoutes'),
    'generate:routeFailed': () => console.log('generate:routeFailed'),
    'generate:manifest': () => console.log('generate:manifest'),
    'generate:done': () => console.log('generate:done'),

    'export:before': () => console.log('export:before'),
    'export:distRemoved': () => console.log('export:distRemoved'),
    'export:distCopied': () => console.log('export:distCopied'),
    'export:route': () => console.log('export:route'),
    'export:routeCreated': () => console.log('export:routeCreated'),
    'export:extendRoutes': () => console.log('export:extendRoutes'),
    'export:routeFailed': () => console.log('export:routeFailed'),
    'export:done': () => console.log('export:done'),

    // vite
    'vite:extend': () => console.log('vite:extend'),
    'vite:extendConfig': () => console.log('vite:extendConfig'),
    'vite:serverCreated': () => console.log('vite:serverCreated'),
  },
  nitro: {
    hooks: {
      'rollup:before': () => console.log('rollup:before'),
      'compiled': () => console.log('compiled'),
      'dev:reload': () => console.log('dev:reload'),
      'close': () => console.log('close'),
      'prerender:route': () => console.log('prerender:route'),
      'prerender:generate': () => console.log('prerender:generate'),
    }
  },
})

启动nuxt, 就可以看到我们打印的钩子名称了

kit:compatibility (repeated 4 times)
imports:sources
imports:dirs
imports:extend
modules:done
nitro:config
nitro:init
ready
listen
prepare:types
app:resolve
components:dirs
app:templates
components:extend
pages:extend
app:templatesGenerated
build:before
vite:extend
vite:extendConfig
vite:serverCreated
server:devMiddleware
vite:extendConfig
build:manifest
pages:extend
ℹ Vite client warmed up
vite:serverCreated
build:done
nitro:build:before
rollup:before
✔ Nitro built
compiled
dev:reload

ps: 本文为Nuxt3启动/构建流程，runtime同理