Um app Vue criado com npm create vue@latest é compilado pelo Vite em dist/: um index.html e o JavaScript que desenha cada página. O Lobsite hospeda essa pasta. Rode npm run build, depois npx lobsite, e o app fica no ar num endereço *.lobsite.app com HTTPS. O modo history do Vue Router funciona assim que o modo de página única é ativado.
Como funciona
- Faça o build do app com
npm run build. O Vite o escreve emdist/. - Rode
npx lobsiteno projeto. Ele publicadist/, nãopublic/, que o Vite copia para o build. O primeiro deploy não precisa de conta e dura 6 horas. - Ative o modo de página única para o Vue Router:
spa = truenolobsite.toml, ou Aplicação de página única nas configurações do site. Mantenha o site com o link de resgate, numa conta gratuita.
Modo history do Vue Router
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes,
});
createWebHistory()gera endereços limpos como/projects/7. Abrir um deles direto pede ao servidor um arquivo que não existe; o modo de página única responde com o seuindex.html, e o Vue Router mostra a view certa.createWebHashHistory()(endereços como/#/projects/7) funciona sem o modo de página única, já que o servidor só vê/. Endereços limpos são melhores para compartilhar e para os buscadores.- Uma rota coringa (
path: "/:pathMatch(.*)*") é onde fica a view de "página não encontrada" do seu app, já que com o modo de página única qualquer caminho de página desconhecido chega ao app.
Nuxt e a Vue CLI
- O Nuxt gera um site estático com
npx nuxi generate, em.output/public/. Essa pasta não é encontrada sozinha, então informe uma vez,npx lobsite .output/public, e ela fica lembrada nolobsite.toml. Cada página é gerada como arquivo próprio, então o modo de página única só é necessário para rotas que o Nuxt não gerou. As rotas de servidor e a renderização no servidor do Nuxt precisam de uma hospedagem que rode Node. - A Vue CLI (
@vue/cli-service) está em modo de manutenção, e projetos novos usam o Vite. Um projeto existente da Vue CLI compila emdist/, que é publicado do mesmo jeito.
spa = true no lobsite.toml, ou um botão no painel: links diretos abrem seu app, arquivos ausentes continuam dando 404.
Os arquivos são guardados pelo hash. Refazer o deploy de um site sem mudanças envia 0 bytes.
Veja a prévia antes de ir ao ar. Volte atrás com um clique, redirecionamentos inclusos.
Todo site ganha um endereço *.lobsite.app com HTTPS desde o primeiro deploy.
Aponte um formulário para /_lobsite/forms/contact. Filtro de spam incluso.
Um deploy sem conta fica no ar por 6 horas. O link de resgate o mantém, de graça.
Hospedagens para Vue comparadas
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Modo history do Vue Router | spa = true ou um botão no painel |
Uma regra em _redirects |
Um rewrite no vercel.json |
Não: modo hash, ou 404.html servido com status 404 |
| Arquivos de script ausentes após um deploy | 404, um erro claro | O index.html do app |
O index.html do app |
404 |
| Renderização no servidor do Nuxt | Não | Sim | Sim | Não |
| Conta antes do primeiro deploy | Não: no ar por 6 horas, depois mantenha grátis | Sim | Sim | Sim, e um repositório |
| Formulários sem backend | Sim, quando o site está numa conta | Sim | Não | Não |
| Domínio próprio | Sim, grátis | Sim | Sim | Sim |
Para um app Vue que roda no navegador, o Lobsite é um comando de dist/ até um endereço no ar, com o modo history a uma configuração de distância e uma URL de prévia para cada deploy.
Perguntas frequentes
Por que as páginas do Vue Router mostram "Not found" ao recarregar?
Endereços no modo history só existem dentro do app. Ative o modo de página única, spa = true no lobsite.toml ou Aplicação de página única nas configurações do site, para que esses caminhos abram o seu index.html.
Um app Vue no Lobsite deve usar modo hash ou history?
History, com o modo de página única ligado. Os endereços ficam mais limpos e os buscadores os tratam como páginas separadas. O modo hash só vale a pena onde você não pode mudar as configurações do servidor.
Posso publicar um site Nuxt no Lobsite?
Sim, um gerado: rode npx nuxi generate, depois npx lobsite .output/public. Páginas que precisam do servidor do Nuxt, como rotas de servidor, não vão rodar.
Como mostro uma view de "página não encontrada" num app Vue?
Adicione uma rota coringa no fim das suas rotas, { path: "/:pathMatch(.*)*", component: NotFound }. Com o modo de página única ligado, qualquer caminho de página desconhecido chega ao app, e o roteador decide o que mostrar.