Vue.js: Configuração do Vite

Última atualização: 2026-08-26

O Vite é uma ferramenta de compilação de última geração lançada pela equipe do Vue 3, com uma inicialização a frio 30 vezes mais rápida que a do Webpack. O Vite 5/6 apresenta melhorias significativas em áreas como TypeScript, SSR e otimização de compilação, tornando-o a escolha padrão para projetos modernos do Vue.

Esta aula irá guiá-lo por toda a configuração de engenharia do Vite 5/6: vite.config.ts, aliases, variáveis de ambiente, SCSS, importação automática e otimização da compilação. Essas são habilidades essenciais para projetos Vue de nível empresarial.

1. O que você vai aprender

• vite.config.ts: Configuração completa (também conhecido como /server/build/css/plugins)
• 3 variáveis de ambiente (prefixadas com VITE_)
• Integração com pré-processadores SCSS/Less
• unplugin-auto-import Importação automática de referências / valores calculados
• path.resolve alias de caminho
• 5 principais técnicas de otimização de compilação (chunking, tree-shaking, minificação, CDN, mapas de origem)
• Principais diferenças entre o Vite 5/6 e o Vite 4

2. Uma comparação da “experiência do engenheiro” durante uma partida a frio de 5 minutos

(1) Problema: O Webpack leva 30 segundos para iniciar a partir do zero, deixando os desenvolvedores à espera de que ele trave

A equipe da Alice utilizou o Webpack:

# Webpack Project Cold Start
$ npm run dev
> Project is running at http://localhost:8080
> Compiled successfully in 28.5s ← Waited 30s

O líder da equipe, Charlie:

“Alice, nosso servidor de desenvolvimento leva 30 segundos para iniciar. Toda vez que salvo um arquivo, a atualização automática demora 3 segundos. Precisamos mudar para o Vite.”

(2) Solução Vite: inicialização a frio em 5 segundos, HMR na ordem de milissegundos

# Vite Project Cold Start
$ npm run dev
> VITE v5.4.0 ready in 487 ms ← Only 0.5s
> Local: http://localhost:5173/

Comparação de experiências de desenvolvimento:

Inicialização a frio 56 vezes mais rápida. A eficiência do desenvolvimento melhorou significativamente desde a mudança para o Vite.

(3) Receita

Depois de mudar para o Vite:

• Inicialização a frio: 28 s → 0,5 s (-98%)
• HMR: 3 s → 50 ms (-98%)
• Tempo de construção: 30 s → 10 s (-67%)
• Satisfação dos desenvolvedores: Melhorou significativamente

3. Conceitos fundamentais do Vite 5/6

(1) Vite Modo Duplo

Development Mode(dev):
 - Using native ESM,Directly in the browser import
 - Compile on Demand(Compiled only on the first visit to the page)
 - HMR Extremely fast(Update only the modules that have been modified)

Production Model(build):
 - Use Rollup Packaging
 - Automatic tree-shaking / Code Break / Compression
 - Output to dist/ Table of Contents

(2) 5 principais vantagens

(3) Vite 5/6 x Vite 4

4. Configuração completa do arquivo vite.config.ts

(1) Estrutura básica

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
 // Project Root Directory(Default process.cwd())
 root: '.',
 
 // Basic Public Paths
 base: '/',
 
 // Plugins
 plugins: [vue()],
 
 // Server Configuration
 server: {
 port: 5173,
 open: true, // Open the browser automatically
 host: '0.0.0.0' // Accessible on the local area network
 },
 
 // Build Configuration
 build: {
 outDir: 'dist',
 sourcemap: false,
 minify: 'esbuild'
 },
 
 // CSS Layout
 css: {
 preprocessorOptions: {
 scss: {
 additionalData: `@import "@/styles/variables.scss";`
 }
 }
 },
 
 // Path Aliases
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 }
})

(2) 5 Principais Características

export default defineConfig({
 // 1. Path Aliases(Most Commonly Used)
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src'),
 '@components': path.resolve(__dirname, 'src/components'),
 '@stores': path.resolve(__dirname, 'src/stores')
 }
 },
 
 // 2. Server Configuration
 server: {
 port: 5173,
 open: true,
 host: '0.0.0.0',
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true
 }
 }
 },
 
 // 3. CSS Preprocessor
 css: {
 preprocessorOptions: {
 scss: { /* ... */ },
 less: { /* ... */ }
 }
 },
 
 // 4. Build Optimization
 build: {
 rollupOptions: {
 output: {
 manualChunks: {
 'vue-vendor': ['vue', 'vue-router', 'pinia']
 }
 }
 },
 chunkSizeWarningLimit: 1500
 },
 
 // 5. Optimization Options
 optimizeDeps: {
 include: ['vue', 'vue-router', 'pinia']
 }
})

5. 3 Tipos de variáveis de ambiente

(1) Regras de prefixo VITE_

# .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_TITLE=My App (Dev)

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My App

# .env.local(git Ignore,Each developer's own)
VITE_API_KEY=secret-key

(2) Definições de tipos do TypeScript

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
 readonly VITE_API_BASE_URL: string
 readonly VITE_APP_TITLE: string
 readonly VITE_API_KEY?: string
}

interface ImportMeta {
 readonly env: ImportMetaEnv
}

(3) Uso em componentes

const apiUrl = import.meta.env.VITE_API_BASE_URL
const title = import.meta.env.VITE_APP_TITLE

(4) Prioridade dos 4 arquivos .env

6. Integração com SCSS

(1) Instalação

npm install -D sass

(2) Variáveis globais

// src/styles/variables.scss
$primary: #42b883;
$danger: #ef4444;
$font-size-base: 14px;
$border-radius: 4px;

// vite.config.ts
css: {
 preprocessorOptions: {
 scss: {
 // Automatically import into each .scss Documents
 additionalData: `@import "@/styles/variables.scss";`
 }
 }
}

// Any .scss You can use them directly in the document
.button {
 background: $primary; /* Not required @import */
 color: white;
 border-radius: $border-radius;
}

(3) As 5 principais vantagens do SCSS

• Variáveis: $primary, $danger
• Aninhamento: Seletores pai-filho
• mixin: Reutilização de blocos de estilo
• Funções: lighten($primary, 10%)
• Modularidade: @use / @forward

7. unplugin-auto-import: Importação automática

(1) Instalação

npm install -D unplugin-auto-import

(2) Configuração

// vite.config.ts
import AutoImport from 'unplugin-auto-import'

export default defineConfig({
 plugins: [
 vue(),
 AutoImport({
 imports: ['vue', 'vue-router', 'pinia'],
 dts: 'src/auto-imports.d.ts', // Type Definitions
 eslintrc: {
 enabled: true // Generate .eslintrc-auto-import.json
 }
 })
 ]
})

(3) Uso

<script setup>
// ✅ No longer needed import ref / computed / watch
const count = ref(0)
const double = computed(() => count.value * 2)
watch(count, (val) => console.log(val))

// ✅ No longer needed useRouter
const router = useRouter()
</script>

(4) 5 principais vantagens

8. 5 Principais otimizações de compilação

(1) Divisão do código em blocos (manualChunks)

// vite.config.ts
build: {
 rollupOptions: {
 output: {
 manualChunks: {
 'vue-vendor': ['vue', 'vue-router', 'pinia'],
 'echarts-vendor': ['echarts', 'vue-echarts'],
 'utils': ['axios', 'dayjs']
 }
 }
 }
}

(2) Tree-shaking (ativado por padrão)

build: {
 rollupOptions: {
 treeshake: {
 moduleSideEffects: 'no-external', // Mark all modules as side-effect-free
 propertyReadSideEffects: false // Reading tag attributes has no side effects
 }
 }
}

(3) Minificação de CSS

build: {
 cssMinify: 'lightningcss', // 10x faster than esbuild
 // or 'esbuild' (Default)
}

(4) Gerenciamento de recursos

build: {
 assetsInlineLimit: 4096, // < 4KB Resources inline(base64)
 rollupOptions: {
 output: {
 assetFileNames: 'assets/[name]-[hash][extname]',
 chunkFileNames: 'js/[name]-[hash].js',
 entryFileNames: 'js/[name]-[hash].js'
 }
 }
}

(5) Mapa de código-fonte (Depuração em ambiente de produção)

build: {
 sourcemap: true, // Generated in the production environment as well(Used for Sentry)
 rollupOptions: {
 output: {
 sourcemapExcludeSources: true // Not including the source code inline into map
 }
 }
}

9. Exemplos completos: 5 principais cenários de configuração do Vite

▶ Exemplo: 1. Preencha o arquivo vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import'
import path from 'path'

export default defineConfig({
 plugins: [
 vue(),
 AutoImport({
 imports: ['vue', 'vue-router', 'pinia'],
 dts: 'src/auto-imports.d.ts'
 })
 ],
 
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 },
 
 server: {
 port: 5173,
 open: true,
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true
 }
 }
 },
 
 css: {
 preprocessorOptions: {
 scss: {
 additionalData: `@import "@/styles/variables.scss";`
 }
 }
 },
 
 build: {
 outDir: 'dist',
 sourcemap: true,
 rollupOptions: {
 output: {
 manualChunks: {
 'vue-vendor': ['vue', 'vue-router', 'pinia']
 }
 }
 }
 }
})

▶ Exemplo: 2. Três tipos de configurações de variáveis de ambiente

# .env.development
VITE_API_BASE_URL=http://localhost:3000

# .env.production
VITE_API_BASE_URL=https://api.example.com

# .env.local
VITE_API_KEY=secret

// src/env.d.ts
interface ImportMetaEnv {
 readonly VITE_API_BASE_URL: string
 readonly VITE_API_KEY?: string
}
interface ImportMeta {
 readonly env: ImportMetaEnv
}

// Usage
const apiUrl = import.meta.env.VITE_API_BASE_URL

▶ Exemplo: 3. 5 Principais otimizações de compilação

▶ Exemplo: 4. Referência rápida para 5 erros comuns

▶ Exemplo: 5. 5 Principais comparações de desempenho do Vite

❓ Perguntas Frequentes

P: Qual é a versão mínima do Node para o Vite 5/6? R: Node 18 ou superior (em outubro de 2023). O Node 16 chegou ao fim da vida útil (EOL). O Vite 4 ainda oferece suporte ao Node 14 ou superior.

P: Como se usa __dirname a partir de path.resolve no ESM? R: Use import.meta.url:fileURLToPath(new URL('./src', import.meta.url)). O Vite 5 recomenda o uso de resolve.alias em combinação com path.resolve.

P: O prefixo “VITE_” é obrigatório para variáveis de ambiente? R: Sim. Por padrão, o Vite expõe apenas variáveis com o prefixo “VITE_” (por motivos de segurança). Outras variáveis não serão incluídas no pacote.

P: A importação automática pode ser usada em um ambiente de produção? R: Sim. O unplugin-auto-import remove o código de importação automática durante a compilação (substituindo-o por importações explícitas), de modo que isso não afeta o processo de empacotamento.

P: O que devo escolher, Vite ou Webpack? R: Use o Vite para todos os novos projetos. O Webpack é usado apenas para manter projetos existentes. O Vite é 30 vezes mais rápido na inicialização a frio e 60 vezes mais rápido com o HMR.

P: Como faço para configurar o SSR do Vite? R: Integre-o usando o vite build --ssr ou o Nuxt 3. A configuração do SSR é um pouco complexa (requer o gerenciamento da hidratação), mas o Vite oferece um bom suporte oficial.

P: Quando os arquivos dts para unplugin-auto-import são gerados? R: Quando o servidor de desenvolvimento é iniciado e durante o processo de compilação. Você também pode executar npx auto-imports manualmente para gerá-los.

📖 Resumo

• Vite 5/6: 0,5 segundos para uma inicialização a frio, 50 ms para HMR (em comparação com o Webpack: 28 segundos/3 segundos)
• 5 seções principais do arquivo vite.config.ts: plugins / server / build / css / resolve.alias
• 3 tipos de variáveis de ambiente: prefixo VITE_ + 4 arquivos .env
• Importação automática de SCSS: additionalData + variables.scss
• unplugin-auto-import: ref / computed / useRouter — Chega de importações
• 5 principais otimizações de compilação: divisão de código / tree-shaking / minificação de CSS / gerenciamento de recursos / mapas de origem
• O Vite é a ferramenta de compilação oficialmente recomendada para o Vue 3

📝 Exercícios

1. Questões básicas (Dificuldade: ⭐)

   Crie um projeto Vite + Vue 3 com a seguinte configuração:

   • Alias de caminho @ → src
   • Variáveis globais do SCSS
   • Um arquivo .env.development contendo VITE_API_BASE_URL

2. Problemas avançados (Dificuldade: ⭐⭐)

   Configuração completa do Vite:

   • Aliases de caminho (@ / @components / @stores)
   • SCSS + Importação automática de variáveis
   • unplugin-auto-import (Vue + Vue Router + Pinia)
   • Proxy /api para o backend
   • Versão de produção do manualChunks (vue-vendor)

3. Problema de desafio (Dificuldade: ⭐⭐⭐)

   Implemente uma “configuração do Vite de nível empresarial” completa:

   1. 5 principais aliases de caminho (@ / @components / @stores / @utils / @composables)
   2. Variáveis globais do SCSS + 5 mixins (flex / card / button / form / responsive)
   3. unplugin-auto-import + geração no estilo Volar
   4. 3 tipos de variáveis de ambiente (dev / staging / prod)
   5. 5 Otimizações de compilação (manualChunks / tree-shaking / lightningcss / / sourcemap)
   6. Proxy /api para o backend
   7. Configuração completa do TypeScript (env.d.ts + auto-imports.d.ts)

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós