Mantenha a compilação Vue que você já usa
Use npm ci e a compilação Vue ou Vite habitual do projeto. Mantenha explícitos o diretório de saída, a URL base e o comportamento das variáveis de ambiente.
Aplicações frontend · planos a partir de $10/mês
Implantar Vue.Publique o site compilado.
Compile uma aplicação Vue a partir do repositório existente, sirva a saída de produção, verifique as rotas do cliente e promova a versão para um domínio HTTPS gerenciado.
Manter o repositórioExaminar compilação e logsDomínios personalizados e TLS
Implantação no Adios
Versão candidata
Vue
FONTE
Git
REGION
de
ROUTE
HTTPS
01Código-fonte recebido
02Compilação concluída
03Ambiente de execução iniciado
04Verificação de saúde aprovada
Rota promovida
production.adios.run
Um caminho até a produção para
VueViteSaída estáticaRoteamento de SPADomínios personalizados
O caminho até a produção
Um projeto Vue que funciona ainda precisa de uma implantação segura.
A aplicação ou o serviço é apenas uma parte da produção. As evidências de compilação, o estado do ambiente de execução, a saúde, os segredos, os logs, as rotas e a versão promovida devem poder ser examinados em conjunto.
Promova a versão que informa estar saudável
Sirva os recursos compilados com um processo de produção, verifique a rota raiz e as rotas aninhadas do cliente e promova a versão depois que a verificação configurada responder.
Rastreie a produção até o código-fonte
Os resultados da compilação, os logs de execução, o estado de saúde, os segredos, os domínios e a versão promovida permanecem vinculados ao projeto, em vez de separados entre ferramentas sem relação entre si.
Do código-fonte à versão publicada
Três etapas mantêm o caminho de implantação fácil de revisar.
Use o código-fonte e o comportamento de produção que o projeto já tem. O manifesto registra o que a plataforma deve compilar ou provisionar e como verificar se o resultado está pronto.
- 01
Começar com código-fonte ou um modelo
Traga o repositório existente ou examine e implante uma das variantes específicas de projeto inicial vinculadas abaixo.
$adios login - 02
Revisar o contrato de implantação
Mantenha os comandos, a versão do ambiente de execução ou do serviço, o comportamento das verificações de saúde e as referências a segredos em adios.yaml.
$git diff -- adios.yaml - 03
Implantar e inspecionar o resultado
Acompanhe as evidências de compilação e execução, verifique a versão candidata e abra a rota promovida ou a conexão do serviço.
$adios up
adios.yaml
Seu projetoname: vue-app
build_cmd: npm ci && npm run build
start_cmd: npm start
runtime:
name: node@24
port: 3000
health_path: /Configure npm start para servir o diretório dist de produção ou use o modelo estático Nginx como ponto de partida.
Pontos de partida prontos para implantação
Comece Vue a partir de um modelo quando o repositório ainda não estiver pronto.
O projeto inicial estático Nginx oferece uma configuração enxuta de entrega em produção que você pode substituir pela saída de uma compilação Vue.
Aplicativos web
Nginx Static
Um projeto inicial de Nginx para HTML, CSS, JavaScript estáticos e aplicativos de página única.
HTMLNenhum
- Chave do modelo
- nginx:static
- Ambiente de execução
- nginx
- Repositório
- template-nginx-static
- Origem do código-fonte
- .
git clone https://github.com/adiosdotdev/template-nginx-static.git
cd template-nginx-static
adios upAntes da produção
Verifique a carga de trabalho.Depois, promova a versão.
O caminho mais seguro para a primeira implantação começa com uma compilação ou configuração de serviço reproduzível e uma prévia que teste as dependências que serão realmente usadas em produção.
Pronto quando…
- A compilação de produção gera o diretório dist esperado.
- Rotas aninhadas no navegador retornam o shell da aplicação.
- As URLs dos recursos funcionam nos domínios gerados e personalizados.
- Os segredos não são incluídos na compilação do JavaScript do cliente.
Use uma prévia quando…
- A aplicação usa Nuxt ou outro ambiente de execução com renderização no servidor.
- O roteador pressupõe uma base de implantação diferente da raiz.
- As variáveis de ambiente diferem entre a compilação e a execução.
Respostas às suas perguntas
O que saber antes de implantar Vue.
Revise os limites do ambiente de execução ou do serviço, o caminho do modelo, o comportamento em caso de falha e as verificações de produção antes de criar a primeira versão.
Adios pode implantar um projeto Vue existente?
Sim. Execute a CLI Adios na raiz do projeto, mantenha o repositório e os arquivos de dependências que você já usa e adicione um arquivo adios.yaml que descreva a compilação de produção, o comando de inicialização, a porta e o caminho de saúde.
Preciso de Docker para implantar Vue?
Não para um ambiente de execução padrão compatível. Use os comandos de produção habituais do projeto em adios.yaml. Se a compilação precisar de pacotes incomuns do sistema operacional ou bibliotecas nativas, verifique essas dependências em uma prévia antes de promover a versão.
Adios pode implantar uma aplicação Vue compilada com Vite?
Sim. Compile o projeto com as dependências nas versões fixadas e sirva o diretório dist gerado por um processo estático de produção.
Como as rotas em modo history do Vue Router funcionam em produção?
Configure o servidor estático para retornar o shell da aplicação nas rotas do navegador que não correspondem a arquivos e verifique a navegação direta em uma prévia.
O que acontece quando a compilação ou a verificação de saúde falha?
A versão candidata mantém os resultados de compilação e execução disponíveis para análise. Ela deve informar estar saudável antes de se tornar a versão promovida que atende a rota da aplicação.
Posso começar por um modelo em vez de um repositório existente?
Sim. Esta página inclui links para os projetos iniciais oficiais Adios Vue mais próximos do seu caso. Examine a variante exata do código-fonte, implante-a no console ou clone-a localmente e execute adios up.
Outros caminhos de implantação
Conecte os demais componentes da stack.
Implantar Sites estáticos
Publique HTML, CSS, JavaScript ou uma compilação estática gerada por um framework a partir de um pequeno projeto inicial Nginx, com rotas, domínios, TLS e estado da versão vinculados.
Implantar React
Compile uma aplicação React a partir do repositório existente, sirva os arquivos gerados ou o processo Node.js de produção e conecte a versão a uma rota HTTPS estável.
Implantar Angular
Compile uma aplicação Angular com a configuração do espaço de trabalho versionada, sirva a saída para o navegador, verifique o fallback das rotas e promova a versão para um domínio HTTPS gerenciado.
Implantar Svelte
Compile um projeto Svelte ou SvelteKit com o adaptador escolhido, sirva a saída gerada, verifique as rotas e mantenha o comando de produção vinculado ao código-fonte.
A primeira versão
Implantar Vue com o código-fonte e as evidências vinculados.
Comece pelo repositório ou por um modelo, revise o contrato de implantação e examine o que será promovido à versão de produção.