Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Também tive problemas na aba Cadastro ao se fazer lazy loading

Após fazer o lazy loading do video nem no servidor nem no ambiente de desenvolvedor eu consigo acessar o conteúdo de Cadastro, não aparecendo qualquer mensagem de erro no prompt ou no console mas ao retirar o lazy loading e importar diretamente o Cadastro o ambiente de dev volta a funcionar

import Home from './components/home/Home.vue';
const Cadastro = () => System.import('./components/cadastro/Cadastro.vue');

export const routes = [

    {path: '',name: 'home', component: Home, titulo: 'Home', menu: true},

    {path: '/cadastro', name: 'cadastro', component: Cadastro, titulo: 'Cadastro', menu: true},

    {path: '/cadastro/:id', name: 'altera', component: Cadastro, titulo: 'Cadastro', menu: false},

    {path: '*', component: Home, menu: false}

];
6 respostas

Fala ai Victor, tudo bem? Estranho não estar dando nenhum erro, você chegou no console do navegador e terminal após o Webpack terminar de buildar a aplicação e não tinha nada?

Compartilha o projeto completo comigo, assim eu consigo dar uma olhada por aqui com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Segue o link: https://drive.google.com/file/d/1_gkR8MlzGas2uP9fuN7guiW-0erTaEwe/view?usp=sharing

Obs* Eu deixei comentado no rout.js a parte de criação da constante Cadastro =() => e deixei por meio do import diretamente como feito nas etapas anteriores .

solução!

Fala Victor, quando é adicionada lazy loading está dando um erro no console:

[Vue warn]: Failed to mount component: template or render function not defined.

Isso porque sua Promise está retornando algo que não é o módulo default que seria o componente, para resolver, mude o import para ficar assim:

System.import('./components/cadastro/Cadastro.vue').then(m => m.default);

Repare que no final eu adicionei um .then(m => m.default); ou seja, estamos resolvendo a Promise, pegando o módulo que foi importado e devolvendo o que foi exportado como default (no caso o componente).

Espero ter ajudado.

Nossa mas que estranho eu tinha tentado essa solução porque vi em outro post e não tinha funcionado mas agora tentei de novo e funcionou vai entender kkkk segue o código:


import Home from './components/home/Home.vue';
/*import Cadastro from './components/cadastro/Cadastro.vue';*/
const Cadastro = () => System.import('./components/cadastro/Cadastro.vue').then(m => m.default);

export const routes = [

    {path: '',name: 'home', component: Home, titulo: 'Home', menu: true},

    {path: '/cadastro', name: 'cadastro', component: Cadastro, titulo: 'Cadastro', menu: true},

    {path: '/cadastro/:id', name: 'altera', component: Cadastro, titulo: 'Cadastro', menu: false},

    {path: '*', component: Home, menu: false}

];

Faz parte kkkkk, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Estou fazendo o curso de Vue.js e tive um problema semelhante com a promise, mas após uma pausa e revisar o código consegui fazer funcionar.