Nuxt Kit中的 Nitro 處理程式

Amd794發表於2024-09-21
UX

title: Nuxt Kit中的 Nitro 處理程式
date: 2024/9/21
updated: 2024/9/21
author: cmdragon

excerpt:
摘要：本文詳細介紹了在Nuxt 3框架中使用Nitro伺服器引擎的實踐，包括建立處理程式處理HTTP請求、路由和中介軟體的基本概念。透過示例展示瞭如何建立伺服器和開發處理程式，運用addServerHandler和addDevServerHandler方法，以及如何使用useNitro獲取Nitro例項和新增自定義外掛以擴充套件功能。

categories:

  • 前端開發

tags:

  • Nuxt 3
  • Nitro
  • 伺服器
  • 處理程式
  • 外掛
  • 預渲染
  • 模組化

image
image

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

Nitro 是 Nuxt 3 的伺服器引擎，支援多種執行環境。它允許你建立高效能的伺服器端應用程式，處理各種 HTTP 請求，動態生成內容等。

2. 基本概念

  • 處理程式：函式，用於處理特定的 HTTP 請求或路由。
  • 路由：URL 路徑，用於匹配處理程式。
  • 中介軟體：在處理請求前處理某些操作的函式，通常用於身份驗證或請求修改。

3. 建立 Nuxt 3 專案

首先，在你的開發環境中建立一個新的 Nuxt 3 專案：

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

4. 新增伺服器處理程式

4.1 使用 addServerHandler

4.1.1 建立處理程式

  1. 在專案根目錄下建立 module.ts 檔案。
  2. 建立 runtime/robots.get.ts 檔案來定義處理程式。
// module.ts
import { createResolver, defineNuxtModule, addServerHandler } from '@nuxt/kit';

export default defineNuxtModule({
  setup(options) {
    const resolver = createResolver(import.meta.url); // 解析路徑

    addServerHandler({
      route: '/robots.txt', // 定義路由
      handler: resolver.resolve('./runtime/robots.get.ts'), // 指向處理程式
    });
  }
});

4.1.2 定義處理程式

// runtime/robots.get.ts
export default defineEventHandler((event) => {
  return `User-agent: *
Disallow: /`;
});

4.1.3 完整專案結構

my-nuxt-app/
├── module.ts
├── runtime/
│   └── robots.get.ts
└── nuxt.config.ts

4.2 執行專案

使用以下命令啟動開發伺服器：

npx nuxi dev

訪問 http://localhost:3000/robots.txt，應該能看到處理程式返回的內容。

5. 新增開發處理程式

5.1 使用 addDevServerHandler

5.1.1 建立開發處理程式

在同一 module.ts 中新增開發專用的處理程式。

// module.ts
import { createResolver, defineNuxtModule, addDevServerHandler } from '@nuxt/kit';

export default defineNuxtModule({
  setup() {
    const resolver = createResolver(import.meta.url);

    addDevServerHandler({
      handler: resolver.resolve('./runtime/timer.get.ts'), // 開發處理程式路徑
      route: '/_timer', // 路由
    });
  }
});

// runtime/timer.get.ts
export default defineEventHandler((event) => {
  return { uptime: process.uptime() }; // 返回應用的執行時
});

5.2 測試開發處理程式

訪問 http://localhost:3000/_timer 檢視返回的執行時資訊。

6. 使用 useNitro

6.1 獲取 Nitro 例項

透過 useNitro 方法在 Nuxt 中使用 Nitro 例項。

// module.ts
import { defineNuxtModule, useNitro } from '@nuxt/kit';

export default defineNuxtModule({
  setup() {
    nuxt.hook('ready', () => {
      const nitro = useNitro(); // 獲取 Nitro 例項
      console.log('Nitro Options:', nitro.options); // 列印 Nitro 配置資訊
    });
  }
});

7. 新增 Nitro 外掛

7.1 使用 addServerPlugin

透過 addServerPlugin 新增一個外掛來擴充套件 Nitro 的功能。

7.1.1 建立外掛

在 runtime/plugin.ts 檔案中定義外掛。

// runtime/plugin.ts
export default (nitro) => {
  nitro.hooks.hook('render:route', (route) => {
    console.log(`Rendering route: ${route}`); // 當路由被渲染時列印
  });
};

7.1.2 註冊外掛

在 module.ts 中註冊外掛：

// module.ts
import { createResolver, defineNuxtModule, addServerPlugin } from '@nuxt/kit';

export default defineNuxtModule({
  setup() {
    const resolver = createResolver(import.meta.url);
    addServerPlugin(resolver.resolve('./runtime/plugin.ts')); // 註冊外掛
  }
});

8. 預渲染路由

8.1 使用 addPrerenderRoutes

可以為靜態站點指定需要預渲染的路由。

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

export default defineNuxtModule({
  setup(options) {
    const routesToPrerender = ['/about', '/contact']; // 需要預渲染的路由

    addPrerenderRoutes(routesToPrerender); // 新增預渲染路由
  }
});

9. 最佳實踐

  • 程式碼組織: 把模組、外掛和處理程式分開，確保專案結構清晰。
  • 使用鉤子: 利用 nuxt.hook 使程式碼在適當位置執行，尤其是處理伺服器設定時。
  • 異常處理: 在處理程式中新增錯誤日誌記錄，以便在開發過程中除錯。

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

往期文章歸檔：

  • Nuxt Kit 中的模板處理 | cmdragon's Blog
  • Nuxt Kit 中的外掛：建立與使用 | cmdragon's Blog
  • Nuxt Kit 中的佈局管理 | cmdragon's Blog
  • Nuxt Kit 中的頁面和路由管理 | cmdragon's Blog
  • Nuxt Kit 中的上下文處理 | cmdragon's Blog
  • Nuxt Kit 元件管理：註冊與自動匯入 | cmdragon's Blog
  • Nuxt Kit 自動匯入功能：高效管理你的模組和組合式函式 | cmdragon's Blog
  • 使用 Nuxt Kit 檢查模組與 Nuxt 版本相容性 | cmdragon's Blog
  • Nuxt Kit 的使用指南：從載入到構建 | cmdragon's Blog
  • Nuxt Kit 的使用指南：模組建立與管理 | cmdragon's Blog
  • 使用 nuxi upgrade 升級現有nuxt專案版本 | cmdragon's Blog
  • 如何在 Nuxt 3 中有效使用 TypeScript | cmdragon's Blog
  • 使用 nuxi preview 命令預覽 Nuxt 應用 | cmdragon's Blog
  • 使用 nuxi prepare 命令準備 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi init 建立全新 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi info 檢視 Nuxt 專案詳細資訊 | cmdragon's Blog
  • 使用 nuxi generate 進行預渲染和部署 | cmdragon's Blog
  • 探索 Nuxt Devtools：功能全面指南 | cmdragon's Blog
  • 使用 nuxi dev 啟動 Nuxt 應用程式的詳細指南 | cmdragon's Blog
  • 使用 nuxi clean 命令清理 Nuxt 專案 | cmdragon's Blog
  • 使用 nuxi build-module 命令構建 Nuxt 模組 | cmdragon's Blog
  • 使用 nuxi build 命令構建你的 Nuxt 應用程式 | cmdragon's Blog

相關文章