Nuxt.js 應用中的 vite：serverCreated 事件鉤子

Amd794發表於2024-11-18
UXJSViteServer事件

title: Nuxt.js 應用中的 vite：serverCreated 事件鉤子
date: 2024/11/18
updated: 2024/11/18
author: cmdragon

excerpt:
透過使用 vite:serverCreated 鉤子，開發者可以在 Vite 伺服器建立時執行特定的操作，包括新增中介軟體和自定義配置。這使得在開發環境中能夠快速響應請求及調整伺服器行為，從而提升開發效率和使用者體驗。

categories:

  • 前端開發

tags:

  • Nuxt
  • Vite
  • 鉤子
  • 中介軟體
  • 日誌
  • 跨域
  • 開發

image

image

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

在 Nuxt 3 中，vite:serverCreated 鉤子允許開發者在 Vite 伺服器建立完成後執行自定義邏輯。這一鉤子的使用能夠讓開發者對伺服器的行為進行動態調整，從而增強開發體驗和系統的靈活性。

文章大綱

  1. 定義與作用
  2. 呼叫時機
  3. 引數說明
  4. 示例用法
  5. 應用場景
    • 5.1 伺服器中介軟體的新增
    • 5.2 自定義日誌功能
    • 5.3 開發環境中的特殊處理
    • 5.4 處理跨域請求
  6. 注意事項
    • 6.1 效能考慮
    • 6.2 中介軟體的執行順序
    • 6.3 適應性處理
  7. 總結

1. 定義與作用

  • vite:serverCreated 是 Vite 的一個鉤子，允許開發者在 Vite 伺服器建立後立即執行某些操作。
  • 透過這個鉤子，您可以訪問到伺服器例項並進行自定義配置、增加中介軟體等操作。

2. 呼叫時機

vite:serverCreated 鉤子在 Vite 伺服器例項建立之後、開始監聽請求之前呼叫。這一時機非常適合對伺服器進行初始化或配置操作。

3. 引數說明

鉤子接收兩個引數：

  1. viteServer: 當前建立的 Vite 伺服器例項，包含了許多用於操作伺服器的方法和屬性。
  2. env: 當前的環境變數，允許根據不同的環境採取不同的操作。

4. 示例用法

以下是如何使用 vite:serverCreated 鉤子的基本示例，展示瞭如何在 Vite 伺服器建立時新增自定義邏輯。

在 plugins/viteServerCreated.js 檔案中的實現

// plugins/viteServerCreated.js

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks('vite:serverCreated', (viteServer, env) => {
    // 輸出當前環境
    console.log('當前環境:', env.NODE_ENV);

    // 在伺服器建立時新增自定義中介軟體
    viteServer.middlewares.use((req, res, next) => {
      console.log('請求路徑:', req.url);
      next(); // 繼續處理請求
    });
  });
});

5. 應用場景

5.1 伺服器中介軟體的新增

透過 vite:serverCreated 鉤子，您可以輕鬆向 Vite 伺服器新增自定義中介軟體，處理特定的請求或響應。

viteServer.middlewares.use((req, res, next) => {
  if (req.url === '/api/special') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('這是一個特殊的 API 響應');
  } else {
    next(); // 繼續替換為下一個中介軟體或處理器
  }
});

5.2 自定義日誌功能

在開發過程中，捕捉並列印請求日誌是一種常見需求。使用 vite:serverCreated 鉤子，您可以輕鬆實現請求日誌功能，記錄請求的時間、方法和路徑。

viteServer.middlewares.use((req, res, next) => {
  const timestamp = new Date().toISOString();
  console.log(`[${timestamp}] 請求方法: ${req.method} | 請求路徑: ${req.url}`);
  next(); // 繼續處理請求
});

5.3 開發環境中的特殊處理

您可以根據不同的環境變數，在開發環境中新增一些特定的處理邏輯。例如，您可能希望在開發模式下啟用除錯資訊：

if (env.NODE_ENV === 'development') {
  viteServer.middlewares.use((req, res, next) => {
    console.log('開發模式下的請求:', req.url);
    next(); // 繼續處理請求
  });
}

5.4 處理跨域請求

在開發階段，前端和後端通常執行在不同的埠上，這會導致跨域請求的問題。您可以透過新增 CORS 中介軟體來解決這個問題：

viteServer.middlewares.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // 允許所有域名進行訪問
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允許的請求方法
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // 允許的請求頭
  if (req.method === 'OPTIONS') {
    // 處理預檢請求
    res.writeHead(204); // 無內容
    return res.end();
  }
  next();
});

6. 注意事項

6.1 效能考慮

在新增中介軟體時，需考慮對效能的影響。儘量避免在請求處理中進行阻塞操作，如複雜的計算或 I/O 操作。這些可能導致請求延遲或卡頓。

6.2 中介軟體的執行順序

中介軟體的執行順序會影響請求的處理方式。確保在設計中介軟體時明確執行順序，避免邏輯衝突，如果一箇中介軟體沒有呼叫 next()，後續中介軟體將無法執行。

6.3 適應性處理

在編寫中介軟體時，根據不同的環境變數進行適應性處理是必要的。例如，開發環境可以啟用更多的除錯資訊，而生產環境則應保持簡潔。透過 env 引數，您可以方便地實現此功能。

7. 總結

透過使用 vite:serverCreated 鉤子，開發者可以在 Vite 伺服器建立時執行特定的操作，包括新增中介軟體和自定義配置。這使得在開發環境中能夠快速響應請求及調整伺服器行為，從而提升開發效率和使用者體驗。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt.js 應用中的 vite：serverCreated 事件鉤子 | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js 應用中的 vite：configResolved 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：extendConfig 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：written 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：beforeWrite 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：resolved 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：extendConfig 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：extend事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 listen 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 prepare：types 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 build：error 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 prerender：routes 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：build：public-assets 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：build：before 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：init 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：config 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 components：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 components：dirs 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：dirs 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：context 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：sources 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 server：devHandler 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 pages：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 builder：watch 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 builder：generateApp 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 build：manifest 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 build：done 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 build：before 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 app：templatesGenerated 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 app：templates 事件鉤子詳解 | cmdragon's Blog

相關文章