Nuxt.js 環境變數配置與使用

Amd794發表於2024-07-25
UXJS變數

title: Nuxt.js 環境變數配置與使用
date: 2024/7/25
updated: 2024/7/25
author: cmdragon

excerpt:
摘要：“該文探討了Nuxt.js框架下環境變數配置的詳細過程，涉及.env檔案配置、執行時訪問、安全性考量、在不同場景下的實踐（如Vue應用、外掛、伺服器路由）及多環境配置下的最佳實踐。”

categories:

  • 前端開發

tags:

  • Nuxt.js
  • 環境變數
  • 配置管理
  • 執行時配置
  • 安全性
  • TypeScript
  • 多環境部署

image
image

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

環境變數是配置應用程式的一種常見方式，特別是在不同的環境（如開發、測試、生產）中管理不同的配置值時。在 Nuxt.js
中，環境變數可以透過.env檔案來設定，並在應用程式中讀取。以下是對您提供資訊的總結和解釋：

環境變數配置

  1. .env檔案：

    • Nuxt CLI 支援在開發、構建和生成過程中讀取.env檔案。
    • 當執行構建後的伺服器時，不會讀取.env檔案。

  2. 環境變數要求：

    • 變數必須在nuxt.config中定義，以避免環境變數直接暴露給應用程式程式碼。
    • 只有以NUXT_開頭的大寫環境變數，並且使用_分隔鍵和大小寫變化的環境變數可以覆蓋執行時配置屬性。

  3. 示例：

    • .env檔案內容：

      NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

    • nuxt.config.ts配置：

      export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // 可以由 NUXT_API_SECRET 環境變數覆蓋
    public: {
      apiBase: '', // 可以由 NUXT_PUBLIC_API_BASE 環境變數覆蓋
    }
  },
});

讀取執行時配置

  1. 在 Vue 應用中：

    • 使用useRuntimeConfig()方法來訪問執行時配置。
    • 在客戶端，只有runtimeConfig.public中的鍵可用，並且是可寫和響應式的。
    • 在伺服器端，整個執行時配置都可用，但它是隻讀的。

  2. 示例：

    • pages/index.vue頁面：

      <script setup>
const config = useRuntimeConfig()

console.log('執行時配置:', config)
if (process.server) {
  console.log('API 金鑰:', config.apiSecret)
}
</script>

<template>
  <div>
    <div>請檢查開發者控制檯！</div>
  </div>
</template>

安全提示

  • 不要透過渲染或傳遞給useState來暴露執行時配置鍵給客戶端。

外掛中使用執行時配置

  • 在自定義外掛中，可以在defineNuxtPlugin函式內部使用useRuntimeConfig()。

  • 示例：plugins/config.ts

    export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  console.log('API 基礎 URL:', config.public.apiBase)
});

伺服器路由中使用執行時配置

  • 在伺服器路由中，可以使用useRuntimeConfig訪問執行時配置。

  • 示例：server/api/test.ts

    export default defineEventHandler(async (event) => {
  const { apiSecret } = useRuntimeConfig(event)
  const result = await $fetch('https://my.api.com/test', {
    headers: {
      Authorization: `Bearer ${apiSecret}`
    }
  })
  return result
})

對執行時配置進行型別定義

  • Nuxt 嘗試自動生成 TypeScript 介面，但也可以手動新增型別。

  • 示例：index.d.ts

    declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
  }
  interface PublicRuntimeConfig {
    apiBase: string
  }
}
// 當增強型別時，確保始終匯入/匯出某些內容是很重要的
export {}

指定不同環境的配置

建立自定義環境檔案：

首先，你需要建立一個自定義的環境檔案，例如 `.env.local`。這個檔案應該包含你希望在開發環境中使用的環境變數。

```
# .env.local
MY_VARIABLE=my_value

```

使用--dotenv引數啟動 Nuxt 開發伺服器：

使用npx nuxi dev --dotenv .env.local命令來啟動 Nuxt 開發伺服器，並指定要載入的環境檔案為.env.local。

```
npx nuxi dev --dotenv .env.local

```

這條命令會執行以下操作：

-   載入 `.env.local` 檔案中的環境變數。
-   將這些環境變數新增到 `process.env` 物件中。
-   啟動 Nuxt 開發伺服器。

自動重啟機制：

在開發模式下，Nuxt 會監視.env.local檔案的變化。如果你修改了.env.local檔案並儲存，Nuxt 會自動檢測到這些變化，並重啟開發伺服器以應用新的環境變數值。

這意味著你不需要手動重啟伺服器，Nuxt 會自動完成這一步驟，確保你的環境變數始終是最新的。

示例

假設你有一個.env.local檔案，內容如下：

# .env.local
API_URL=http://localhost:3000/api
DEBUG_MODE=true

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

npx nuxi dev --dotenv .env.local

在開發過程中，如果你修改了.env.local檔案，例如將DEBUG_MODE改為false：

# .env.local
API_URL=http://localhost:3000/api
DEBUG_MODE=false

儲存檔案後，Nuxt 會自動檢測到變化並重啟伺服器，使新的環境變數生效。

i .env.local changed, restarting server...
i server restarted.

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：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
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog

相關文章