Nuxt 3 já está disponível! Descobre mais sobre isso https://nuxt.com/v3

Translated page Contents of this page might be outdated.

A propriedade env

Partilhe variáveis de ambiente entre o cliente e o servidor.


  • Tipo: Object

O Nuxt permite você criar variáveis de ambiente do lado do cliente, e também serem partilhadas a partir do lado do servidor.

A propriedade env define variáveis de ambiente que devem estar disponível no lado do cliente. Eles podem ser atribuídos usando variáveis de ambiente do lado do servidor, com o módulo dotenv ou similares.

Para versões do Nuxt > 2.12+, nos casos onde variáveis de ambiente forem exigidas em tempo de execução (não em tempo de construção) é recomendado para substituir a propriedade env com as propriedades do runtimeConfig : publicRuntimeOptions e privateRuntimeOptions.Aprenda mais com o nosso tutorial sobre o movendo do @nuxtjs/dotenv para configuração do tempo de execução .

Certifique-se de ler sobre o process.env e o process.env == {} abaixo para melhor resolução de problemas.

nuxt.config.js
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

Isto permite você criar uma propriedade baseUrl que será equal a variável de ambiente BASE_URL do lado do servidor se estiver disponível ou definida. Se não, O baseUrl no lado do cliente será igual a 'http://localhost:3000'. A variável BASE_URL do lado do cliente é então copiada para o lado do cliente através da propriedade env dentro do ficheiro nuxt.config.js. Alternativamente, o outro valor é definido (http://localhost:3000).

Depois, Eu posso acessar minha variável baseUrl em duas maneiras:

  1. Através do process.env.baseUrl.
  2. Através do context.env.baseUrl, consulte a API de contexto .

Você pode usar a propriedade env para atribuir uma chave pública por exemplo.

Para o exemplo acima, nós podemos usar ele para configurar o axios .

plugins/axios.js
import axios from 'axios'

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

Então, dentro da suas páginas, você pode importar o axios desse jeito: import axios from '~/plugins/axios'

Injeção automática de variáveis de ambiente

Se você definir variáveis de ambiente começando com o NUXT_ENV_ na fase de construção (por exemplo, NUXT_ENV_COOL_WORD=freezing nuxt build ou SET NUXT_ENV_COOL_WORD=freezing & nuxt build para a consola do Windows, eles serão automaticamente injetados dentro do ambiente de processo). Esteja ciente que eles irão potencialmente ter precedência sobre variáveis definidas dentro do seu ficheiro nuxt.config.js com o mesmo nome.

process.env == {}

Nota que o Nuxt usa o definePlugin do webpack para definir a variável de ambiente. Isto significa que o atual process ou process.env do Node.js não está nem disponível nem definido. Cada propriedade de env definida dentro do ficheiro nuxt.config.js é individualmente mapeado para process.env.xxxx e convertido durante a compilação.

Querendo dizer que, o console.log(process.env) imprimirá {} mas o console.log(process.env.your_var) continuará a imprimir seu valor. Quando o webpack compila o seu código, ele substitui todas instâncias de process.env.your_var com o valor que você tem definido, por exemplo: env.test = 'testing123'. Se você usar process.env.test em algum lugar do seu código, ele é de fato traduzido para 'testing123'.

antes

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

depois

if ('testing123' == 'testing123')

A propriedade serverMiddleware

Visto que a propriedade serverMiddleware é desligada da construção principal do Nuxt, variáveis de env definidas dentro do ficheiro nuxt.config.js não estão disponíveis lá.

Edit this page on GitHub Updated at Wed, Feb 1, 2023