Nuxt.js 環境變數配置與使用_ZenDei技術網路在線

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

-Advertisement-

title: Nuxt.js 環境變數配置與使用 date: 2024/7/25 updated: 2024/7/25 author: cmdragon excerpt: 摘要：“該文探討了Nuxt.js框架下環境變數配置的詳細過程，涉及.env文件配置、運行時訪問、安全性考量、在不同場景下的實踐（ ...

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

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

categories:

前端開發

tags:

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

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

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

環境變數配置

.env文件：
- Nuxt CLI 支持在開發、構建和生成過程中讀取.env文件。
- 當運行構建後的伺服器時，不會讀取.env文件。
環境變數要求：
- 變數必須在nuxt.config中定義，以避免環境變數直接暴露給應用程式代碼。
- 只有以NUXT_開頭的大寫環境變數，並且使用_分隔鍵和大小寫變化的環境變數可以覆蓋運行時配置屬性。

示例：

.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 環境變數覆蓋
    }
  },
});

讀取運行時配置

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

示例：

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

往期文章歸檔：

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