Nuxt.js 環(huán)境變量配置

環(huán)境變量配置

• 類型： Object

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

例如 (nuxt.config.js)：

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

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

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

1. 通過 process.env.baseUrl
2. 通過 context.baseUrl，請(qǐng)參考 context api

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

舉個(gè)例子， 我們可以利用它來配置 axios 的自定義實(shí)例。

plugins/axios.js：

import axios from 'axios'

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

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

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

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

process.env == {}

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

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

編譯前：

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

編譯后：

if ('testing123' == 'testing123')