Nuxt 常用配置和生命周期钩子的使用

前文对Nuxt的基本异常捕获和状态处理做了介绍，结合之前的内容其实可以使用nuxt完成大部分纯前端应用的开发了。

本文将对前文提到的Nuxt配置项做补充并大致介绍一下Nuxt的生命周期钩子。

Nuxt的配置文件

在之前的文章，我们多次使用nuxt.config.ts 的配置文件，在模块使用，css 的引入等等都有使用到。本次就大致了解一下nuxt 相关的配置模块有哪些。

前文我们在其中配置了诸如modules、runtimeConfig、build以及vite等内容

Nuxt 支持 Vite 和 Webpack 这两种打包工具，默认选用 Vite。

我们可以根据项目具体需求，通过设置builder属性进行选择。

例如，若要将打包工具配置为 Webpack，可以进行如下设置：

js 复制代码

 export default defineNuxtConfig({ builder: "webpack" });

需要注意的是，此时需要安装 @nuxt/webpack-builder。

相应地，如果想要修改对应打包工具的配置，可以分别使用vite或webpack选项，具体配置如下：

js 复制代码

export default defineNuxtConfig({ vite: {}, webpack: {} });

设置不同的渲染模式配置项

js 复制代码

//执行 pnpm generate 打包的就是spa
export default defineNuxtConfig({ ssr:false });

//混合渲染配置
routeRules:{
   '/': { prerender: true },
    // 产品页面按需生成，后台自动重新验证
    '/products/**': { swr: 3600 },
    // 博客文章按需生成，直到下一次部署前持续有效
    '/blog/**': { isr: true },
    // 管理仪表板仅在客户端渲染
    '/admin/**': { ssr: false },
    // 在API路由上添加cors头
    '/api/**': { cors: true },
    // 跳转旧的URL
    '/old-page': { redirect: '/new-page' }
}

自动导入配置项

js 复制代码

imports: {
    dirs: ['constant']
  },

Nuxt.config.ts

Nuxt 有默认配置可满足大部分需求，若要覆盖或扩展，可在项目根目录创建 nuxt.config.ts，其默认导出 defineNuxtConfig () 的执行结果，与默认配置合并后生效，如前文增加的模块配置。

app.config.ts

如果想要在项目中配置一些公共变量，可以在项目根目录下创建一个名为 app.config.ts 的文件。这些变量具有响应式的特点，也就是说，不仅在运行时能够被访问，而且还可以进行修改。以下是一个配置范例

js 复制代码

// 导出配置对象
export default defineAppConfig<AppConfig>({
  apiBaseUrl: 'https://your-api-url.com', // 设置后端 API 的基础 URL
  defaultPageSize: 10, // 设置默认每页数据条数为 10
  appName: 'My Awesome App',
  themeMode: 'light',
  defaultPageTitle: 'Welcome to My App',
  themeColors: {
    primary: '#4CAF50', // 设置主要主题颜色为绿色
    secondary: '#2196F3', // 设置次要主题颜色为蓝色
  },
});

当我们想使用这些公共变量的时候

js 复制代码

const appConfig = useAppConfig();
console.log('App Name:', appConfig.appName);
console.log('Theme Mode:', appConfig.themeMode);
console.log('Default Page Title:', appConfig.defaultPageTitle);

其它配置

像我们写项目会配置很多辅助模块，比如说前文我们引入的 tailwind 需要tailwind.config.js 去配置相应内容，如果我们使用unocss 那么也就需要配置 uno.config.ts

这类配置和我们普通的项目开发没有区别，主要还是依赖我们使用的库。

Nuxt的生命周期钩子

Nuxt 的生命周期钩子包含三个部分分别是 Nuxt应用本身的生命周期，vue app的生命周期，以及Nitro 的生命周期。

Nuxt生命周期

在 Nuxt 的构建过程中，这些钩子贯穿了初始化和构建的各个阶段，为开发者提供了丰富的机会来干预并定制构建流程。

无论是使用 Nuxi 进行项目初始化和配置管理，还是借助 Vite 和 Webpack 进行资源打包和优化，亦或是利用 Nitro 进行服务器端渲染和静态生成，这些钩子都发挥着重要作用。

以下是一些 Nuxt 钩子的实际应用案例：

一、build:before钩子用于清理旧的构建产物

在持续集成/持续部署（CI/CD）环境中，确保每次构建都是干净的非常重要。可以使用build:before钩子在构建开始前删除旧的构建产物目录，防止旧文件干扰新的构建。

js 复制代码

import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('build:before', () => {
      const buildDir = '.nuxt';
      if (fs.existsSync(buildDir)) {
        fs.rmSync(buildDir, { recursive: true });
      }
    });
  }
});

二、nitro:init钩子用于添加自定义的服务器中间件

假设你需要在服务器端添加一个日志中间件来记录所有的请求。可以使用nitro:init钩子在 Nitro 初始化后添加这个中间件。

js 复制代码

import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('nitro:init', (nitro) => {
      nitro.hooks.hook('preHandler', (req, res, next) => {
        console.log(`Received request: ${req.url}`);
        next();
      });
    });
  }
});

三、vite:extendConfig钩子用于添加自定义的 Vite 插件

如果你想在开发过程中使用一个特定的 Vite 插件来处理某种类型的文件，可以使用vite:extendConfig钩子添加这个插件。

js 复制代码

import { defineNuxtModule } from '@nuxt/kit';
//示例插件，不存在
import customVitePlugin from 'custom-vite-plugin';
export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('vite:extendConfig', (viteConfig) => {
      viteConfig.plugins.push(customVitePlugin());
    });
  }
});

四、pages:extend钩子用于动态添加路由

在某些情况下，你可能需要根据某些条件动态地添加路由。例如，根据用户的角色动态生成特定的页面路由。

js 复制代码

import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
 setup(options, nuxt) {
   nuxt.hook('pages:extend', (pages) => {
     if (isUserAdmin()) {
       pages.push({
         name: 'admin-page',
         path: '/admin',
         component: '~/pages/admin.vue'
       });
     }
   });
 }
});

五、build:manifest钩子用于优化资源加载

可以使用build:manifest钩子来优化资源的加载顺序或者添加额外的资源引用。例如，对于一个特定的页面，确保某个关键的 CSS 文件在其他资源之前加载。

js 复制代码

import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
   setup(options, nuxt) {
     nuxt.hook('build:manifest', (manifest) => {
       const pageEntry = manifest.entrypoints.find(entry => entry.name === 'your-page-name');
       if (pageEntry) {
         pageEntry.css.unshift('path/to/important.css');
       }
     });
   }
 });

Vue App 生命周期

Vue App 的钩子会在运行时被调用，并且主要用于编写插件。这些钩子能够让开发者在 Vue 的渲染生命周期的特定阶段插入自定义的代码逻辑。

例如，在开发一个性能监控插件时，可以利用created钩子来初始化性能数据收集器。当 Vue 实例创建完成后，插件可以开始记录各种性能指标，如页面加载时间、组件渲染时间等。

js 复制代码

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:created', (vueApp) => {
      const performanceData = {};
      vueApp.config.globalProperties.$startPerformanceTracking = () => {
        // 开始记录性能数据
        performanceData.startTime = new Date().getTime();
      };
      vueApp.config.globalProperties.$stopPerformanceTracking = () => {
        // 停止记录性能数据并进行分析
        const endTime = new Date().getTime();
        const loadTime = endTime - performanceData.startTime;
        console.log(`Page load time: ${loadTime}ms`);
      };
    });
  });

Nitro App 生命周期

Nitro App 钩子在 Nitro 引擎运行之际被调用，这为开发者编写服务端插件提供了契机。

通过这些插件，能够针对性地修改和扩展 Nitro 引擎的默认行为。

比如，可以调整响应头信息以增强安全性，或者优化数据处理流程以提升性能。这种灵活性使得开发者能够根据具体项目需求，定制化 Nitro 引擎的功能，从而构建出更加高效、强大的服务端应用程序。

一、自定义响应头增强安全性

可以使用 Nitro App 的钩子来添加特定的响应头，增强应用的安全性。例如，添加 Content-Security-Policy 响应头来限制页面可以加载的资源来源，防止恶意脚本的注入。

js 复制代码

export default defineNitroPlugin((nitroApp) => {
    nitroApp.hook('render:html', (htmlContext) => {
      htmlContext.res.headers.set('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;");
      return htmlContext;
    });
  });

关于更多nitro生命周期钩子的使用大家可以查阅生命周期文档

nuxt.com/docs/api/ad...
配置 - Nitro (unjs.io)

总结

Nuxt 的生命周期钩子部分涵盖内容是比较宽泛的，大家可以发现前后端都有涉及到，大家可以注意到我前面几篇文章几乎没有提到Nuxt 的服务端开发，而是围绕着前端需要做的部分来实现。

由于一般情况下很少会让前端开发这个岗位直接开发后端内容所以这几篇文章我都围绕着前端的内容来讲，基本上了解以上知识就可以使用Nuxt完成一个项目的开发了。

大家可能听说过在 C/S 架构中间添加一个 node.js 中间层来处理前端所需数据的概念。实际上，Nuxt 也非常适合充当这个中间层，来对后端数据做处理，我们再请求Nuxt的接口，当然它也可以直接用于构建后端。

后续我将对服务端的部分做介绍，并补充一些nuxt的详细内容，比如modelus开发等。