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.
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.
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:
-
Através do
process.env.baseUrl
. -
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 .
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á.
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)
![Sylvain Marroufin](/_nuxt/image/c9abac.png)
![Spencer Cooley](/_nuxt/image/b3bb68.png)