環(huán)境變量配置

• 類型： Object

Nuxt.js 讓你可以配置在客戶端和服務端共享的環(huán)境變量。

例如 (nuxt.config.js)：

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

以上配置我們創(chuàng)建了一個 baseUrl 環(huán)境變量，如果應用設定了 BASE_URL 環(huán)境變量，那么 baseUrl 的值等于 BASE_URL 的值，否則其值為 http://localhost:3000。

然后， 我們可以通過以下兩種方式來使用 baseUrl 變量：

1. 通過 process.env.baseUrl
2. 通過 context.baseUrl，請參考 context api

你可以使用 env 屬性配置第三方服務的公鑰信息。

舉個例子， 我們可以利用它來配置 axios 的自定義實例。

plugins/axios.js：

import axios from 'axios'

export default axios.create({
  baseURL: process.env.baseUrl
})

然后在頁面中，我們可以使用 import axios from '~/plugins/axios' 引入 axios 模塊。

自動注入環(huán)境變量

如果在構建階段定義以NUXT_ENV_開頭的環(huán)境變量，例如：NUXT_ENV_COOL_WORD=freezing nuxt build，它們將自動注入環(huán)境變量中。請注意，它們可能優(yōu)先于nuxt.config.js中具有相同名稱的已定義變量。

process.env == {}

請注意，Nuxt使用webpack的definePlugin來定義環(huán)境變量。這意味著Node.js中的process或process.env既不可用也不能定義。nuxt.config.js中定義的每個env屬性都單獨映射到process.env.xxxx并在編譯期間進行轉換編譯。

意思是，console.log(process.env)將輸出{}，但console.log(process.env.you_var)仍將輸出您的值。它將process.env.your_var的所有實例替換為您將其設置為的值。即：env.test ='testing123'。如果你在代碼中的某個地方使用process.env.test，它實際上被翻譯成'testing123'。

編譯前：

if (process.env.test == 'testing123')

編譯后：

if ('testing123' == 'testing123')