Vue Academy · Aula

Configuração e plugins do CLI

Configure o CLI e adicione plugins para ampliar seu projeto.

Configuração e plugins do CLI é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

Configurando sua compilação

Tanto o Vue CLI quanto o Vite permitem personalizar a compilação por meio de um arquivo de configuração.

O Vue CLI usa vue.config.js
O Vite usa vite.config.js

Aqui você adiciona plug-ins, define aliases, configura o servidor de desenvolvimento e muito mais.

Noções básicas de vite.config.js

Um vite.config.js típico importa o plug-in do Vue e exporta um objeto de configuração.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

Noções básicas de vue.config.js

Nos projetos Vue CLI, o vue.config.js exporta a configuração da mesma forma.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Adicionando plug-ins

Os plug-ins ampliam a compilação com novos recursos.

Instale-os com npm
Importe-os no arquivo de configuração
Adicione-os ao vetor de plug-ins

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Variáveis de ambiente

Armazene em arquivos .env as configurações que mudam entre ambientes.

.env carregado em todos os ambientes
.env.development somente para desenvolvimento
.env.production para compilações de produção

Definindo variáveis de ambiente

No Vite, as variáveis devem ter o prefixo VITE_ para serem expostas ao código do cliente.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Lendo variáveis de ambiente

Acesse as variáveis expostas por meio de import.meta.env no Vite.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Observação de segurança sobre variáveis de ambiente

Qualquer coisa exposta ao código do cliente fica visível no navegador.

Nunca coloque segredos, como chaves privadas de API, em variáveis VITE_
Apenas configurações públicas e não confidenciais devem ficar aqui
Mantenha os segredos reais no servidor

Aliases de caminho

Um alias encurta os caminhos de importação. O mais comum mapeia @ para a pasta src.

Isso evita caminhos relativos frágeis, como ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

Usando o alias

Depois de configurado, importe de @/ em vez de usar caminhos relativos.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Opções do servidor de desenvolvimento

O arquivo de configuração também ajusta o servidor de desenvolvimento:

port em qual porta escutar
open abrir o navegador automaticamente
proxy encaminhar solicitações de API para evitar CORS

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Verificação rápida

Teste sua compreensão sobre a configuração do Vite.

Recapitulação: configuração e plug-ins

Você aprendeu a configurar um projeto Vue:

vite.config.js ou vue.config.js contêm as configurações
Adicione plug-ins ao vetor de plug-ins
Use arquivos .env com o prefixo VITE_
Leia-os por meio de import.meta.env
Defina o alias @ para obter importações mais limpas

A seguir: sintaxe de modelos e vinculação de dados.

Perguntas Frequentes

A aula “Configuração e plugins do CLI” é grátis?

Sim — o texto completo de “Configuração e plugins do CLI” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Configuração e plugins do CLI”?

Configure o CLI e adicione plugins para ampliar seu projeto. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.

Quanto tempo leva a aula “Configuração e plugins do CLI”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy