Como fazer Deploy de sua aplicação construída com VueJS que usa o history mode do vue-router?
Se você desenvolvedor construiu sua aplicação com VueJS, utilizando o history mode do vue-router e está tendo dificuldades de colocar seu código em produção, veja como fazer isso de forma simples seguindo o passo a passo:
O primeiro passo é abrir o terminal na pasta do seu projeto o digitar o comando:
npm run builderEsse comando vai gerar os arquivos minificados que devem ser subidos para o servidor. Estes arquivos ficarão dentro de uma pasta gerada no projeto, nomeada dist.
Na pasta gerada estarão os seguintes arquivos:
Simples!
Mas se você já tentou subir esses aquivos da forma como estão (se você está usando o history mode) percebeu que há alguns problemas (alguns problemas de página não encontrada).
Por quê isso acontece?
Isso ocorre porque quando se usa o history mode é preciso fazer uma configuração adicional do servidor.
Basicamente, essa configuração adicional consiste na adição de um arquivo que indicará o comportamento do servidor durante a execução da aplicação em alguns casos específicos. Isso é necessário porque o servidor de aplicação não consegue lidar com as rotas dinâmicas do frontend:
Caso você acesse a raiz do servidor …
E a partir daí comece a nevegar pelo site, tudo funcionará perfeitamente, mas … Se você acessa o site diretamente colocando o endereço de uma rota dinâmica definida pelo vue-router, como por exemplo:
https://meu-site.com.br/cidades/ce
Aí está o problema, pois o servidor tentará resolver este endereço da URL para uma rota estática, que não vai existir, o que vai gerar um 404 NOT FOUND (porque a requisição não passou por index.html, e o vue não foi carregado).
Como resolver isso?
Para contornar esse problema deve-se colocar junto a pasta de seus códigos uma configuração para lidar com esse empecilho.
Cria-se um arquivo que deve ser salvo dentro da pasta do projeto e deve ter a extensão .htaccess.
Nesse post darei como exemplo o código para a configuração em servidores Apache.
Configurações para outros servidores podem ser encontradas em https://router.vuejs.org/guide/essentials/history-mode.html
Cole esse código dentro do se arquivo .htaccess:
<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]</IfModule>
(Essa configuração considera que você vai colocar os arquivos na raiz do seu servidor, mas adiante mostro como faz caso sua aplicação não seja hospedada na raiz).
O que essa Configuração faz?
De forma bem superficial, o que esse arquivo faz é adicionar uma fallback route (ou “Rota alternativa”). Estou “dizendo” para meu servidor que sempre que ele receber uma requisição para o meu domínio e a URI não conicidir com nenhum recurso estático ele deve me redirecionar para index.html (onde o Vue será carregado e tudo funcionará normalmente)
Agora tudo OK, suba seus arquivos para o servidor e comece a utilizar sua aplicação.
Adicional: Caso você esteja hospedando a sua aplicação em um subpasta no servidor, faça os seguintes ajustes na linha 3 do arquivo de configuração:
<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /nome-da-sua-subpasta/RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]</IfModule>
Tudo funcionará perfeitamente!
