Nuxt3 的生命週期和鉤子函式（九）

---

title: Nuxt3 的生命週期和鉤子函式（九）
date: 2024/7/3
updated: 2024/7/3
author: cmdragon

excerpt:
摘要：本文介紹了Nuxt3中與Vite相關的五個生命週期鉤子，包括vite:extend、vite:extendConfig、vite:configResolved、vite:serverCreated和vite:compiled，展示瞭如何在每個鉤子中擴充套件Vite配置、讀取配置、新增中介軟體和處理編譯事件。每個鉤子都有詳細的描述和示例程式碼，幫助開發者在Nuxt應用中實現自定義構建邏輯和伺服器配置。

categories:

• 前端開發

tags:

• Nuxt3
• Vite
• 生命週期
• 鉤子函式
• 前端開發
• Webpack
• 編譯最佳化

---

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

vite:extend

引數

• viteBuildContext: Vite 的構建上下文物件，允許開發者訪問和修改 Vite 的構建過程。

詳細描述

vite:extend 鉤子用於在 Vite 的構建過程中擴充套件預設的構建上下文。透過這個鉤子，開發者可以訪問到 Vite 的內部構建過程，並對其進行自定義擴充套件，比如新增自定義外掛、修改配置或註冊額外的中介軟體等。

Demo

以下是一個示例，展示如何在 Nuxt 外掛中使用 vite:extend 鉤子來擴充套件 Vite 的構建上下文：

// plugins/viteExtend.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:extend 鉤子
  nuxtApp.hook('vite:extend', (viteConfig, { isServer, isClient }) => {
    // 在這裡可以擴充套件或修改 Vite 的配置
    if (isClient) {
      // 修改客戶端的 Vite 配置
      viteConfig.plugins.push(...additionalClientPlugins);
    } else if (isServer) {
      // 修改服務端的 Vite 配置
      viteConfig.plugins.push(...additionalServerPlugins);
    }

    // 例如，新增一個自定義的外掛
    viteConfig.plugins.push({
      name: 'custom-plugin',
      apply: 'build', // 外掛應用階段
      enforce: 'post', // 外掛執行順序
      transform(code, id) {
        // 對程式碼進行轉換
        return code.replace(/console\.log\(/g, 'console.error(');
      }
    });

    // 注意：這裡只是示例程式碼，實際使用時需要根據實際情況來修改
  });
});

在這個示例中，我們註冊了一個 vite:extend 鉤子，它會在 Vite 的配置階段被呼叫。我們透過訪問 viteConfig 物件來修改 Vite 的配置，比如新增自定義外掛。我們根據是否是客戶端或服務端構建來決定應用哪些外掛。此外，我們還演示瞭如何新增一個簡單的自定義外掛，該外掛會在構建時對程式碼進行轉換。

透過這種方式，開發者可以深入到 Vite 的構建過程中，進行更加細緻的自定義操作。

vite:extendConfig

引數

• viteInlineConfig: Vite 的內聯配置物件，用於直接修改 Vite 的配置。
• env: 環境變數物件，包含了當前環境下的所有環境變數。

詳細描述

vite:extendConfig 鉤子允許開發者在 Nuxt 應用中擴充套件或修改 Vite 的預設配置。這個鉤子在 Vite 配置階段被呼叫，可以用來新增或修改外掛、配置項等。透過這個鉤子，開發者可以利用 Vite 的靈活性來滿足特定專案的需求。

Demo

以下是一個示例，展示如何在 Nuxt 外掛中使用 vite:extendConfig 鉤子來擴充套件 Vite 的配置：

// plugins/viteExtendConfig.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:extendConfig 鉤子
  nuxtApp.hook('vite:extendConfig', (config, { mode }) => {
    // 在這裡可以擴充套件或修改 Vite 的配置
    // 例如，根據不同的環境變數新增不同的配置
    if (mode === 'production') {
      // 修改生產環境的 Vite 配置
      config.plugins.push(...additionalProductionPlugins);
    } else {
      // 修改開發環境的 Vite 配置
      config.plugins.push(...additionalDevelopmentPlugins);
    }

    // 修改 Vite 的基本配置
    config.base = '/custom_base_path/';

    // 新增一個自定義的別名
    config.resolve.alias['@custom'] = '/path/to/custom';

    // 注意：這裡只是示例程式碼，實際使用時需要根據實際情況來修改
  });
});

在這個示例中，我們註冊了一個 vite:extendConfig 鉤子，它會在 Vite 的配置階段被呼叫。我們透過訪問 config 物件來修改 Vite 的配置，比如新增外掛、修改基礎路徑、新增別名等。我們還根據當前的模式（開發或生產）來決定應用哪些外掛。

透過這種方式，開發者可以靈活地調整 Vite 的配置，以適應不同的構建環境和需求。

vite:configResolved

引數

• viteInlineConfig: Vite 的內聯配置物件，它包含了所有使用者定義的 Vite 配置。
• env: 環境變數物件，包含了當前環境下的所有環境變數。

詳細描述

vite:configResolved 鉤子允許開發者在 Nuxt 應用中讀取已經解析完成的 Vite 配置。這個鉤子在 Vite 配置已經被解析並且所有外掛已經被應用之後被呼叫。開發者可以利用這個鉤子來獲取最終的配置資訊，以便進行一些基於配置的後處理操作，例如根據配置資訊進行條件編譯或者列印配置資訊等。

Demo

以下是一個示例，展示如何在 Nuxt 外掛中使用 vite:configResolved 鉤子來讀取已解析的 Vite 配置：

// plugins/viteConfigResolved.js

export default defineNuxtPlugin((nuxtApp) => {
  // 使用 vite:configResolved 鉤子
  nuxtApp.hook('vite:configResolved', (config) => {
    // 在這裡可以讀取到最終的 Vite 配置
    console.log('Resolved Vite config:', config);

    // 例如，你可以根據配置做一些邏輯處理
    if (config.plugins.some(plugin => plugin.name === 'some-plugin-name')) {
      // 執行一些操作，比如啟用某個功能
    }

    // 注意：這裡只是示例程式碼，實際使用時需要根據實際情況來處理
  });
});

在這個示例中，我們註冊了一個 vite:configResolved 鉤子，它會在 Vite 的配置解析完成後被呼叫。我們透過訪問 config 引數來獲取最終的 Vite 配置物件，並可以對其進行檢查或操作。在這個例子中，我們僅僅是將配置列印到控制檯，但在實際應用中，開發者可能需要根據配置資訊執行更復雜的邏輯。

透過使用 vite:configResolved 鉤子，開發者可以確保在執行任何基於配置的操作之前，所有的 Vite 配置都已經完全載入和解析完畢。

vite:serverCreated

引數

• viteServer: 已經建立的 Vite 伺服器例項，包含了所有 Vite 伺服器的屬性和方法。
• env: 環境變數物件，包含了當前環境下的所有環境變數。

詳細描述

vite:serverCreated 鉤子允許開發者在 Nuxt 應用中在 Vite 伺服器建立時進行一些自定義操作。這個鉤子在 Vite 伺服器例項被建立後立即呼叫，開發者可以利用這個鉤子來訪問和修改 Vite 伺服器的配置，或者新增自定義的中介軟體和處理邏輯。

Demo

vite:compiled

webpack:config

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog

往期文章歸檔：

• Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（七） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（六） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（五） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（四） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（三） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（二） | cmdragon's Blog
• Nuxt3 的生命週期和鉤子函式（一） | cmdragon’s Blog
• 初學者必讀：如何使用 Nuxt 中介軟體簡化網站開發 | cmdragon's Blog
• 深入探索 Nuxt3 Composables：掌握目錄架構與內建API的高效應用 | cmdragon's Blog
• 掌握 Nuxt 3 中的狀態管理：實踐指南 | cmdragon's Blog
• Nuxt 3 路由系統詳解：配置與實踐指南 | cmdragon's Blog
• Nuxt 3元件開發與管理 | cmdragon's Blog