Front-end com Vue 3

Aparência

Variáveis de Ambiente ​

No Vite, as variáveis de ambiente são uma maneira prática de configurar e adaptar seu aplicativo a diferentes ambientes (desenvolvimento, produção, etc.). Aqui está um resumo de como elas funcionam e como podem ser utilizadas:

Definição e Carregamento de Variáveis de Ambiente ​

  • Arquivos .env: O Vite suporta arquivos .env para definir variáveis de ambiente. Estes arquivos devem estar localizados na raiz do projeto. Você pode ter diferentes arquivos .env para diferentes modos, por exemplo, .env.development, .env.production.

  • Prefixo VITE_: Todas as variáveis de ambiente que você deseja expor para seu código front-end devem ser prefixadas com VITE_. Isso é necessário por motivos de segurança, para garantir que você não exponha inadvertidamente informações sensíveis.

Exemplos de Arquivos .env ​

.env ​

txt
VITE_API_URL=https://api.example.com

.env.development ​

txt
VITE_API_URL=https://dev.api.example.com

.env.production ​

txt
VITE_API_URL=https://prod.api.example.com

Acesso às Variáveis no Código ​

Você pode acessar as variáveis de ambiente no seu código JavaScript/TypeScript usando import.meta.env:

typescript
console.log(import.meta.env.VITE_API_URL); // Exibe a URL da API baseada no ambiente atual

Modos de Execução ​

O Vite suporta a definição de diferentes modos de execução, que determinam quais arquivos .env são carregados. Por padrão, o Vite suporta os modos development, production e test. Você pode especificar o modo ao executar comandos do Vite:

bash
vite build --mode production

Carregamento Dinâmico de Variáveis ​

Para carregar variáveis de ambiente dinamicamente no arquivo de configuração do Vite (vite.config.js), você pode usar a função loadEnv:

typescript
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  // Carregar variáveis de ambiente
  const env = loadEnv(mode, process.cwd());

  return {
    // Configurações do Vite
    define: {
      __APP_ENV__: env.APP_ENV,
    },
  };
});

Exemplo Completo ​

Aqui está um exemplo completo que inclui a configuração de variáveis de ambiente e como elas são usadas no código e na configuração do Vite:

Estrutura de Arquivos ​

plaintext
my-project/
  ├── .env
  ├── .env.development
  ├── .env.production
  ├── vite.config.js
  └── src/
      └── main.js

.env ​

txt
VITE_APP_TITLE=My App

.env.development ​

txt
VITE_APP_TITLE=My App (Development)

.env.production ​

txt
VITE_APP_TITLE=My App (Production)

vite.config.ts ​

typescript
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    define: {
      __APP_TITLE__: JSON.stringify(env.VITE_APP_TITLE),
    },
  };
});

src/main.js ​

typescript
console.log(import.meta.env.VITE_APP_TITLE); // Dependendo do modo, exibirá "My App", "My App (Development)" ou "My App (Production)"

Esses recursos permitem uma gestão flexível e segura das configurações do ambiente em projetos Vite, adaptando o comportamento do aplicativo conforme o ambiente em que está sendo executado.

Como está configurado o carregamento de variáveis de ambiente no projeto base ​

No projeto base, as variáveis de ambiente são carregadas a partir de arquivos .env.dev e .env.production. O arquivo .env.dev é carregado no modo de desenvolvimento e o arquivo .env.production é carregado no modo de produção.

Estrutura de Arquivos ​

plaintext
projeto-base/
  ├── .env.dev
  ├── .env.production

Variáveis de Ambiente padrão ​

  • VITE_APP_ROOT: Diretório onde a aplicação está localizado.
  • VITE_APP_URL_SUFIX: Configura a página inicial da aplicação.
  • VITE_APP_TIMEOUT_REQUEST: Tempo limite para as requisições.
  • VITE_APP_API_URL: URL base da API.
  • VITE_APP_API_URL_AA: URL base da API de Autoatendimento.
  • VITE_APP_INTEGRACAO: URL base da API de Integração.

vite.config.ts ​

typescript
import { fileURLToPath, URL } from "node:url";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import VueDevTools from "vite-plugin-vue-devtools";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  const { VITE_APP_ROOT } = process.env;

  return {
    base: VITE_APP_ROOT,
    build: {
      target: "ES2022",
    },
    plugins: [vue(), VueDevTools(), ViteImageOptimizer()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
  };
});