Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Configuração Vite

Gere um arquivo vite.config.ts/js a partir de uma predefinição de framework (Vanilla, React, React SWC, Vue, Svelte, Solid), plugins opcionais (SVGR, tsconfig-paths, PWA, compressão, visualizador de bundle), construtor de alias de caminho, editor de regras de proxy do servidor de desenvolvimento e opções de build — baixe ou copie, pronto para usar.

Entrada

Seleciona o plugin do framework e suas importações recomendadas.

Apenas altera o nome do arquivo/comentário de cabeçalho — o corpo da configuração é válido de qualquer forma.

Plugins

Aliases de Caminho

Um por linha como alias=caminho, por exemplo @=./src. Deixe em branco para nenhum.

Servidor de Desenvolvimento

O padrão próprio do Vite é 5173 — apenas emitido se você o alterar.

Um por linha como caminho=alvo, por exemplo /api=http://localhost:3000. Deixe em branco para nenhum.

Build

Opções de Saída

Saída

Configuração Gerada
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/vite-config-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "framework": "reactSwc",
    "useTypescript": "true",
    "pluginSvgr": "true",
    "pluginTsconfigPaths": "",
    "pluginPwa": "",
    "pluginCompression": "",
    "pluginVisualizer": "",
    "aliases": "@=./src",
    "serverPort": "3000",
    "serverOpen": "true",
    "serverHost": "",
    "proxyRules": "/api=http://localhost:8080",
    "buildTarget": "esnext",
    "outDir": "dist",
    "sourcemap": "",
    "includeComments": "true",
    "includeHeader": "true",
    "includeInstall": "true"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `vite-config-generator` tool (Vite Config Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/vite-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Configuração Vite — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

O Gerador de Configuração Vite constrói um vite.config.ts (ou .js) pronto para usar a partir de alguns menus suspensos e alternâncias — não é necessário memorizar nomes de importação de plugins, o padrão de alias fileURLToPath/import.meta.url ou a forma de uma regra de proxy. Escolha seu framework, configure alguns plugins e aliases, e copie o arquivo gerado diretamente para seu projeto.

O que faz

Configurações do Vite parecem simples até você precisar de aliases de caminho, um proxy do servidor de desenvolvimento ou mais de um plugin — depois você está jugando importações, o objeto resolve.alias e entradas server.proxy à mão. Esta ferramenta monta tudo isso para você. Ela suporta:

  • Predefinições de framework — Vanilla, React (@vitejs/plugin-react), React com SWC (@vitejs/plugin-react-swc), Vue 3, Svelte e Solid, cada um com a importação de plugin correspondente e comando de instalação.
  • Plugins de recursos — SVGR (importar SVGs como componentes React), vite-tsconfig-paths, vite-plugin-pwa, compressão gzip/Brotli e visualizador de tamanho de bundle, cada um um alternador independente.
  • Construtor de alias de caminho — uma linha alias=caminho por alias, renderizada como o padrão seguro para ESM fileURLToPath(new URL('./caminho', import.meta.url)) (funciona de qualquer arquivo, ao contrário de __dirname).
  • Editor de proxy do servidor de desenvolvimento — uma linha caminho=alvo por regra, renderizada como uma entrada server.proxy com changeOrigin: true.
  • Opções de build — alvo, diretório de saída e sourcemaps.
  • TypeScript vs. JavaScript — alterna o nome do arquivo/comentário de cabeçalho; o corpo gerado é válido de qualquer forma.

Apenas as seções que você realmente muda em relação aos padrões próprios do Vite aparecem na saída — nenhuma linha port: 5173 reafirmando o padrão, nenhum bloco build vazio — então o arquivo se lê como algo que uma pessoa escreveu à mão, não um despejo de modelo.

Como usar

  1. Escolha seu framework.
  2. Alterne qualquer plugin que você precise (SVGR aparece apenas para predefinições React).
  3. Adicione aliases de caminho, um por linha como alias=caminho (por exemplo @=./src).
  4. Defina uma porta de servidor de desenvolvimento personalizada, ative open/host e adicione regras de proxy se precisar.
  5. Ajuste as opções de build se seu alvo ou diretório de saída não for o padrão do Vite.
  6. Copie a configuração gerada ou baixe-a, depois execute o comando de instalação que ela mostra.

A saída é atualizada instantaneamente conforme você altera qualquer opção.

Ainda preciso instalar os pacotes?

Sim. A ferramenta gera o texto de configuração e o comando de instalação correspondente, mas não instala nada para você. Execute a linha npm install -D … que ela produz (ou o equivalente yarn/pnpm) para que o Vite possa resolver os plugins referenciados.

Por que meu alias usa fileURLToPath(new URL(...)) em vez de path.resolve(__dirname, ...)?

vite.config.ts é executado como um módulo ES, onde __dirname não está disponível sem configuração extra. O padrão fileURLToPath(new URL('./src', import.meta.url)) é o equivalente seguro para ESM que os próprios modelos do Vite usam, e funciona da mesma forma se a configuração é TypeScript ou JavaScript.

Posso ajustar a configuração depois?

Absolutamente. O arquivo gerado é um ponto de partida comum — adicione mais plugins, estenda os objetos resolve.alias/server.proxy, ou sobreponha opções que este gerador não cobre. Trate a saída como uma linha de base sólida, não um resultado bloqueado.

Ferramentas relacionadas

Privacidade

Este gerador é executado inteiramente em seu navegador. Suas seleções nunca são carregadas, registradas ou armazenadas — a configuração é montada localmente a partir das opções que você escolhe, e nada deixa seu dispositivo.

vitevite.configbundlerbuild toolreactvuesveltesoliddeveloper tools

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios