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

-Advertisement-

title: Nuxt.js必讀：輕鬆掌握運行時配置與 useRuntimeConfig date: 2024/7/29 updated: 2024/7/29 author: cmdragon excerpt: 本文詳細介紹了Nuxt.js中的運行時配置功能，包括定義和使用運行時配置的方法，以及如何 ...

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

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

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

往期文章歸檔：

您的分享是我們最大的動力!