Como usar um vite.config.ts diferente no ambiente local

Se você trabalha com Vite + Vue.js e precisa de uma configuração específica apenas no seu ambiente de desenvolvimento local, uma solução simples é criar um arquivo de configuração separado e utilizá-lo apenas ao iniciar o servidor localmente.

Isso pode ser útil, por exemplo, para utilizar configurações específicas do VueDevTools, usar variáveis de ambiente diferentes, entre outras personalizações sem afetar os outros ambientes.

Criando um arquivo de configuração local

Por padrão, o Vite usa o arquivo vite.config.ts, mas podemos definir um arquivo diferente para iniciar o projeto localmente. Para isso, siga estes passos:

1. Crie um novo arquivo de configuração, por exemplo: my.config.ts.

2. Copie o conteúdo de vite.config.ts para esse novo arquivo e faça as modificações necessárias.

3. Ao iniciar o servidor de desenvolvimento, utilize a flag --config para indicar o novo arquivo:

    yarn dev --config my.config.ts
   

4. Para evitar que esse arquivo seja enviado ao repositório, adicione-o ao .gitignore:

    echo "my.config.ts" >> .gitignore
   

Conclusão

Dessa forma, você pode personalizar sua configuração do Vite exclusivamente para o ambiente local, sem impactar a versão usada por outros desenvolvedores ou nos ambientes de produção.