0Pricing
Vue Academy · Aula

Implantação em Plataformas de Hospedagem

Implante aplicações Vue em hosts e plataformas estáticos.

Implantação em Plataformas de Hospedagem é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.

Publicar seu app

Um SPA do Vue é compilado em arquivos estáticos, então você pode hospedá-lo em qualquer serviço de hospedagem estática. Plataformas como Netlify, Vercel e GitHub Pages tornam a implantação desses arquivos rápida e geralmente gratuita.

O que você implanta

Você implanta o conteúdo da pasta dist produzida por npm run build. O servidor disponibiliza esses arquivos por meio de uma CDN para usuários do mundo todo.

npm run build
# upload the dist/ folder to your host

Implantar no Netlify

O Netlify pode compilar a partir do seu repositório Git. Você informa o comando de compilação e a pasta a ser publicada.

# Netlify settings
# Build command: npm run build
# Publish directory: dist

Implantar no Vercel

O Vercel detecta automaticamente projetos Vite. Conecte seu repositório; ele executa a compilação e disponibiliza a saída, fazendo uma nova implantação a cada envio.

# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist

Implantar no GitHub Pages

O GitHub Pages disponibiliza arquivos estáticos de um repositório. Você compila localmente ou na integração contínua e depois envia a saída dist para a ramificação do Pages ou usa uma ação.

O problema do modo de histórico

O Vue Router no modo de histórico cria URLs limpas como /about. Mas um servidor estático não tem um arquivo /about real, então uma visita direta ou atualização retorna 404.

A correção do redirecionamento da SPA

A solução é instruir o servidor a disponibilizar index.html para todas as rotas, deixando o Vue Router cuidar do roteamento no cliente.

Regra de redirecionamento do Netlify

No Netlify, adicione um arquivo _redirects (ou uma regra em netlify.toml) que reescreva todos os caminhos para index.html.

# public/_redirects
/*    /index.html   200

Regra de reescrita do Vercel

No Vercel, uma regra de reescrita em vercel.json produz a mesma alternativa para index.html.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Configuração do caminho base

Se seu app for disponibilizado a partir de um subcaminho (algo comum no GitHub Pages, como /my-repo/), defina a opção base na configuração do Vite para que as URLs dos recursos sejam resolvidas corretamente.

// vite.config.js
export default {
  base: "/my-repo/"
}

Implantação por integração contínua

Automatize as implantações com integração contínua. Um fluxo de trabalho instala dependências, executa testes, compila e publica a cada envio para sua ramificação principal, para que a publicação não exija intervenção manual.

# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/

Verificação rápida

Teste seus conhecimentos sobre implantação.

Recapitulação

Implante a pasta dist em um serviço de hospedagem estática como Netlify, Vercel ou GitHub Pages. Adicione uma alternativa de SPA (redirecionamento/reescrita para index.html) para que as rotas do modo de histórico funcionem após uma atualização, defina o base do Vite para hospedagem em subcaminho e automatize tudo com integração contínua. Em seguida, você monitorará e manterá o app em produção.

Perguntas Frequentes

A aula “Implantação em Plataformas de Hospedagem” é grátis?

Sim — o texto completo de “Implantação em Plataformas de Hospedagem” é 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 “Implantação em Plataformas de Hospedagem”?

Implante aplicações Vue em hosts e plataformas estáticos. 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 2 de 3.

Quanto tempo leva a aula “Implantação em Plataformas de Hospedagem”?

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

  1. Otimização do Processo de Compilação
  2. Implantação em Plataformas de Hospedagem
  3. Monitoramento e Manutenção
← Voltar para Vue Academy