No desenvolvimento web moderno, é essencial gerenciar dados confidenciais, como chaves de API, credenciais de banco de dados e várias configurações para diferentes ambientes. Armazenar essas variáveis ​​diretamente no código pode representar riscos de segurança e complicar a implantação. Vite, uma ferramenta moderna de construção de front-end, fornece uma maneira direta de gerenciar variáveis ​​de ambiente por meio de arquivos .env.

O que é um arquivo .env?

Um arquivo .env é um arquivo de configuração simples usado para definir variáveis ​​específicas do ambiente. Essas variáveis ​​podem ser acessadas em seu aplicativo, permanecendo separadas do código-fonte. Essa prática permite fácil gerenciamento de diferentes ambientes – desenvolvimento, preparação e produção – sem codificar dados confidenciais.

Variáveis ​​de ambiente no Vite:

Vite vem com suporte integrado para variáveis ​​de ambiente, tornando mais fácil injetar valores diferentes com base no ambiente atual. Veja como o Vite lida com variáveis ​​de ambiente:

Variáveis ​​globais: Vite injeta variáveis ​​de ambiente no momento da construção.
Variáveis ​​prefixadas: Somente variáveis ​​prefixadas com VITE_ são expostas ao código JavaScript do lado do cliente por motivos de segurança. Quaisquer variáveis ​​não prefixadas desta forma não estarão acessíveis no navegador.

Exemplo de variável de ambiente Vite:

VITE_API_URL=https://api.example.com

Configurando arquivos .env no Vite
Vite oferece suporte a vários arquivos .env, permitindo definir variáveis ​​de ambiente para ambientes específicos. Aqui está uma configuração típica:

.env: arquivo padrão para variáveis ​​de ambiente compartilhadas entre todos os ambientes.
.env.development: Variáveis ​​específicas do ambiente de desenvolvimento.
.env.production: Variáveis ​​específicas do ambiente de produção.

Exemplo de arquivo .env:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

Exemplo de arquivo .env.development:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

Exemplo de arquivo .env.production:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Acessando variáveis ​​de ambiente no Vite

Para acessar variáveis ​​de ambiente dentro do seu projeto Vite, use o objeto import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite substitui automaticamente os valores import.meta.env durante o processo de construção com base no ambiente atual.

Gerenciamento de vários ambientes:

Os arquivos .env do Vite podem ser personalizados para diferentes ambientes, como desenvolvimento, teste e produção. Dependendo do ambiente em que você está, o Vite carregará o arquivo .env apropriado:

A execução do vite carrega o arquivo .env.development.
A execução do vite build carrega o arquivo .env.production.
Executando em um ambiente específico:

vite --mode staging

Depuração de variáveis ​​de ambiente:

Se você estiver tendo problemas com variáveis ​​de ambiente que não funcionam conforme o esperado, verifique o seguinte:

• Prefixo de variável: certifique-se de que todas as variáveis ​​do lado do cliente tenham o prefixo VITE_, pois o Vite ignora variáveis ​​sem esse prefixo.
• Ordem de carregamento de env: certifique-se de que .env e arquivos específicos do ambiente estejam na raiz do projeto e sejam nomeados corretamente.
• Verifique o processo de construção: use console.log(import.meta.env) para ver todas as variáveis ​​de ambiente disponíveis durante o desenvolvimento.

Conclusão::

O suporte integrado do Vite para variáveis ​​de ambiente por meio de arquivos .env facilita o gerenciamento de configurações em diferentes ambientes.