Nuxt3實戰系列之配置管理詳情 - vue.js,nuxt.js,服務端渲染,ssr,vue3 imwty 博客

Nuxt提供了一個運行時配置API，在你的應用程序和服務器路由中暴露配置，並能在運行時通過設置環境變量進行更新。

定義運行時配置

為了將配置和環境變量暴露給應用程序，你需要在nuxt.config文件中使用runtimeConfig選項定義運行時配置。

export default defineNuxtConfig({
  runtimeConfig: {
    // 只在服務端可以訪問的配置項
    apiSecret: '123',
    // 可以暴露給客户端使用的配置項
    public: {
      apiBase: '/api'
    }
  }
})

需要留意的一點是，默認定義的配置選項都只能在服務端流程中可訪問，如果需要在客户端也能使用，需要將配置項定義在public選項內。
配置項定義好後，我們可以使用useRuntimeConfigApi去獲取定義的配置項的值。

<script setup>
  const runtimeConfig = useRuntimeConfig()
  console.log(runtimeConfig.apiSecret)
  console.log(runtimeConfig.public.apiBase)
</script>
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

使用 Options API 時，我們也可通過 this.$config.public 獲取到運行時配置。
配置好後，重新運行一下程序，我們可以在終端控制枱以及瀏覽器的控制枱看到打印的配置項。
終端中顯示的是服務端執行時候打印的配置，可以看到都成功的獲取到了值。

瀏覽器控制枱上打印的是在客户端上執行的結果，可以看到，apiSecret的值為undefined，確實是沒有獲取到。

序列化

運行時配置在傳遞給Nitro之前會被序列化。這意味着，任何不能被序列化然後反序列化的東西（如Function、Sets, Maps等），都不應該在nuxt.config中設置。
你可以把這些代碼放在Nuxt或Nitro的插件或中間件中，而不是從nuxt.config中把不可序列化的對象或函數傳入你的應用程序。

環境變量

提供配置的最常見方法是使用環境變量。
Nuxi CLI 內置支持在開發、構建和生成過程中讀取 .env 文件。但是當你運行你構建的服務器時，你的 .env 文件將不會被讀取。
運行時配置值在運行時自動替換為匹配的環境變量，但有兩個關鍵要求：

您需要的變量必須在您的 nuxt.config 中定義。這可確保任意環境變量不會暴露給您的應用程序代碼。
只有特別命名的環境變量才能覆蓋運行時配置屬性。規則是用NUXT_ 開頭的大寫環境變量，使用 _ 來分隔鍵和大小寫變化。

示例如下：

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

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // 該項會被 NUXT_API_SECRET 環境變量覆蓋
    public: {
      apiBase: '', // 該項會被 NUXT_PUBLIC_API_BASE 環境變量覆蓋
    }
  },
})

添加完環境變量後，需要重新運行下項目才能生效，重新運行後，再看打印的值。可以發現環境變量獲取成功了。

如何區分開發環境和線上環境

Nuxt CLI 在開發模式以及運行 nuxi build 和 nuxi generate 時內置了 dotenv 支持。
除了任何進程環境變量外，如果你在項目根目錄下有一個.env文件，它將在構建、開發和生成時自動加載，並且在那裏設置的任何環境變量都可以在nuxt.config文件和modules中訪問。
如果你想使用不同的文件，例如，使用.env.local或.env.production，你可以在使用nuxi時傳遞dotenv標誌來實現。例如。

npx nuxi dev --dotenv .env.local

如上所述，這隻適用於開發模式以及運行nuxi build和nuxi generate時。
那麼我們可以先在根目錄下，創建一個.env.local文件，在該文件內覆蓋其中一個變量

然後，進入package.json文件，修改dev命令如下：

 "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --dotenv .env.local",  // 指定啓動開發模式時讀取的環境變量配置文件
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

修改後，我們重新運行下程序, 可以看到在.env.local中設置的環境變量在開發模式下已經生效。

接下來我們可以再執行npm run generate命令看看打包時環境變量的讀取情況, 可以看到依然是.env中的值，符合我們的預期

結語

博客原創地址：Nuxt3實戰系列之配置管理 | imwty

歡迎讀者朋友們批評指正。

聯繫作者：imwty2023（微信），iwhitney@163.com（郵箱）

imwty 博客

imwty 博客

博客 / 詳情