Remover o Aviso Gerado por pathMatch

Introdução

Neste projeto, você aprenderá como corrigir um problema de aviso na biblioteca vue-router 3.1.3. O vue-router é uma biblioteca de roteamento popular para aplicações Vue.js, e a versão 3.1.3 tinha um bug que gerava um aviso quando o parâmetro pathMatch era um valor vazio. Seguindo o guia passo a passo, você será capaz de localizar o problema, corrigir o código e reconstruir a biblioteca para resolver o aviso.

🎯 Tarefas

Neste projeto, você aprenderá:

• Como identificar o problema no arquivo params.js da biblioteca vue-router 3.1.3
• Como corrigir o código para remover o aviso
• Como reconstruir a biblioteca vue-router 3.1.3 com a correção
• Como testar a versão corrigida para garantir que o aviso não seja mais exibido

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Solucionar problemas e corrigir problemas em uma biblioteca de terceiros
• Entender a importância de manter as dependências atualizadas e corrigir bugs conhecidos
• Demonstrar o processo de reconstrução de uma biblioteca após fazer alterações no código
• Testar a funcionalidade de uma biblioteca para garantir que ela funcione conforme o esperado

Corrigir o Aviso no Vue-Router 3.1.3

Para começar, observe a estrutura de diretórios dos arquivos à esquerda, conforme segue:

├── vue-router-3.1.3
├── vue.js
└── index.html

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente, clique em "/nope/", depois clique em "test" e abra a opção Console no console do navegador. Você verá a seguinte mensagem:

[vue-router] missing param for named route "NotFound": Expected "0" to be defined

Nesta etapa, você aprenderá como corrigir o aviso gerado pelo problema pathMatch no código do vue-router 3.1.3.

1. Abra o arquivo vue-router-3.1.3/src/util/params.js.
2. Localize o código na linha 28 que está causando o aviso:

if (process.env.NODE_ENV !== "production") {
  warn(false, `missing param for ${routeMsg}: ${e.message}`);
}

3. Comente a chamada da função warn para remover o aviso:

if (process.env.NODE_ENV !== "production") {
  // warn(false, `missing param for ${routeMsg}: ${e.message}`)
}

Isso impedirá que o aviso seja exibido no console.

Reconstruir e Testar o Projeto Vue-Router 3.1.3

Nesta etapa, você reconstruirá e testará o projeto vue-router 3.1.3 após corrigir o aviso.

1. Abra um terminal e navegue até o diretório vue-router-3.1.3.
2. Execute o comando npm install para instalar as dependências. Este processo pode levar algum tempo, por favor, seja paciente. (Se ficar preso por muito tempo, pressione Ctrl+C para terminar o processo e, em seguida, execute este comando novamente.)
3. Após todas as dependências terem sido instaladas com sucesso, execute o comando npm run build para reconstruir e lançar o projeto. Isso gerará uma nova compilação da biblioteca vue-router 3.1.3 com a correção do aviso.
4. Abra a página Web 8080 no seu navegador.
5. Clique no link "/nope/", depois clique no link "test".
6. Abra o console do navegador e verifique se a mensagem de aviso não é mais exibida.

Parabéns! Você corrigiu com sucesso o problema do aviso na biblioteca vue-router 3.1.3.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.