Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig

Amd794發表於2024-07-29
UXJS

title: Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig
date: 2024/7/29
updated: 2024/7/29
author: cmdragon

excerpt:
本文詳細介紹了Nuxt.js中的執行時配置功能，包括定義和使用執行時配置的方法，以及如何透過useRuntimeConfig訪問配置。同時，講解了環境變數與.env檔案的使用，特別是在不同環境下的配置管理。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • 執行時配置
  • Vue.js
  • SSR
  • 環境變數
  • .env檔案
  • useRuntimeConfig

image
image

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

Nuxt.js 是一個基於 Vue.js 的框架，它極大地簡化了服務端渲染（SSR）和靜態站點生成的開發過程。在 Nuxt.js 中，執行時配置是一個強大的功能，允許開發者根據不同的環境（如開發、生產等）動態地調整配置。

一、什麼是執行時配置？

執行時配置是 Nuxt.js 中的一個特性，它允許你在不同的環境下使用不同的配置。例如，你可能需要在一個環境中使用一個 API 基礎 URL，而在另一個環境中使用另一個 URL。執行時配置可以讓你輕鬆實現這一點。

二、如何定義執行時配置？

在 Nuxt.js 中，你可以在 nuxt.config.ts 檔案中定義執行時配置。以下是一個簡單的例子：

export default defineNuxtConfig({
  runtimeConfig: {
    // 私有金鑰，僅在伺服器端可用
    apiSecret: '123',

    // 公共金鑰，可以在客戶端和伺服器端訪問
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

在這個例子中，apiSecret 是一個私有金鑰，僅在伺服器端可用。apiBase 是一個公共金鑰，可以在客戶端和伺服器端訪問。

三、如何使用 useRuntimeConfig？

useRuntimeConfig 是一個組合函式，用於在元件或 API 介面中訪問執行時配置。以下是如何在元件中使用它的示例：

<template>
  <div>
    <h1>API Base URL: {{ config.public.apiBase }}</h1>
  </div>
</template>

<script>
export default {
  setup() {
    const config = useRuntimeConfig()
    return {
      config
    }
  }
}
</script>

在伺服器端 API 中，你可以這樣使用 useRuntimeConfig：

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
  // 使用配置
})

四、環境變數與 .env 檔案

你可以在 .env 檔案中設定環境變數，以便在開發和構建過程中訪問它們。例如：

NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"

這些變數可以透過 process.env 在 Nuxt 應用中訪問。

在生產執行時中，你應該使用平臺的環境變數配置，而不是使用 .env 檔案。在構建完成後，當你執行伺服器時，.env 檔案將不會被讀取。具體如何設定環境變數取決於你的環境。

五、 app 名稱空間

在Nuxt.js中，app名稱空間是用於儲存一些特定的執行時配置的，這些配置通常與應用的全域性行為和設定相關。在app名稱空間中，有兩個重要的鍵：baseURL和cdnURL。

1. app.baseURL

作用：app.baseURL 是一個用於儲存應用的根URL的鍵。預設情況下，這個值被設定為'/'。這個鍵主要用於在應用中統一處理URL的字首，例如在API呼叫、路由連結、靜態資源訪問等場景中。

如何使用：

// 在你的元件中訪問baseURL
export default {
  setup() {
    const config = useRuntimeConfig()
    console.log('Base URL:', config.app.baseURL)
  }
}

2. app.cdnURL

作用：app.cdnURL 是一個用於儲存CDN（內容分發網路）URL的鍵。這個鍵主要用於在生產環境中，當應用使用CDN來加速靜態資源的載入時，提供一個自定義的CDN URL。在開發環境中，這個值通常被設定為空字串或者預設值。

如何使用：

// 在你的API服務中訪問cdnURL
export default defineEventHandler((event) => {
  const config = useRuntimeConfig()
  const cdnURL = config.app.cdnURL
  console.log('CDN URL:', cdnURL)
})

設定環境變數

為了在執行時自定義這些值，你可以透過設定環境變數來實現。例如，為了改變app.baseURL，你可以在.env檔案中新增：

NUXT_APP_BASE_URL=https://your-custom-base-url.com

對於app.cdnURL，你可以在.env檔案中新增：

NUXT_APP_CDN_URL=https://your-custom-cdn-url.com

示例程式碼

假設你有一個plugins/my-plugin.ts檔案，你想要在其中使用app.baseURL：

export default defineNuxtPlugin((NuxtApp) => {
  const config = useRuntimeConfig()
  const baseURL = config.app.baseURL
  console.log('Using base URL:', baseURL)
})

對於server/api/foo.ts中的app.cdnURL：

export default defineEventHandler((event) => {
  const config = useRuntimeConfig()
  const cdnURL = config.app.cdnURL
  console.log('Using CDN URL:', cdnURL)
})

透過這種方式，你可以確保在不同的環境（如開發、測試、生產）中，應用能夠使用不同的配置，從而提高應用的靈活性和可維護性。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog

相關文章