Erro ao dar build no vue cli

Após fazer o build de uma aplicação escrita no VueJS e configurá-la para rodar no Apache, é comum ocorrer um erro 404 ao tentar acessar as rotas da mesma, ou a pádina em branco.

Isso ocorre geralmente porque o Vue Route utiliza o History Mode. Ao tentar acessar as urls pelos link da aplicação, a navegação ocorre normalmente. Porém, ao acessar diretamente pela barra de navegação ou ao tentar atualizar a página, ocorre o erro 404.
Você precisa configurar a reescrita de URL no Apache 2 apontando qualquer path da url para o arquivo index.html.

Primeira opção: Na raiz do projeto crie um arquivo com nome vue.config.js e adicione as linhas module.esports = { publicPath: ‘nome-da-pasta‘}

Você deve criar um arquivo .htaccess na raiz do projeto, com o seguinte conteúdo.



  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

ou outra opção seria


RewriteEngine On
RewriteBase /nome-da-pasta
RewriteRule ^nome-da-pasta/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /nome-da-pasta/index.html [L]

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

*