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

Error ao rodar build com Lazy load

Boa noite, Quando estou rodando o build a 1º página é carregada sem problemas, mais quando tento entrar no cadastrou ou alteração a página fica em branco. No console não mostra nenhum erro, e o arquivo 0.build.js esta sendo carregado. Este é o trecho de código do arquivo routes.js

import Home from './components/home/Home.vue';
// import Cadastro from './components/cadastro/Cadastro.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 de Fotos', menu: true },
    { path: '/cadastro/:id', name: 'altera', component: Cadastro, titulo: 'Cadastro de Fotos', menu: false },
    { path: '*', component: Home, menu: false }
];

A versões utilizadas são: node v8.9.1 vue-cli -v 5.5.1

Desde já obrigado pela atenção.

3 respostas

Está me cheirando a bug da versão que você está usando. Sugiro refazer o curso usando a versão homologada por mim. Você também pode verificar no fórum do Vue CLI no bug report e verificar se quebraram algo nesse sentido.

Como você atualizou não saberá se é problema no seu projeto ou bug de algum módulo.

A versão homologada por mim é de longe a mais estável do Vue.

Não só neste treinamento e plataforma de ensino, sugiro sempre seguir e usar as versões indicadas no curso e só no final trocar para uma mais nova. Assim fica fácil saber quando há erro no projeto , problema de compatibilidade ou bug.

solução!

Olá Flavio, Após pesquisar na rede e não encontrar uma solução plausível, fiz o que tinha que ter feito desde o inicio, comparei os arquivos da versão baixada no vue-cli com os arquivos disponibilizados no curso, chegando a seguinte conclusão:

1) O arquivo package.json NÃO sofreu alterações e ficou como foi baixado pelo cli.

2) O arquivo webpack.config.js, aqui estava o problema, na versão atual dentro da rule já tinha um teste css com USE:[ ... ]

    {
                test: /\.css$/,
                use : [
                    'vue-style-loader',
                    'css-loader'
                ],
            },

E quando colocava:

    {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },

Dava erro de compilação ao colocar (retirando o USE original):

loader: 'style-loader!css-loader'

Fiquei com a versão baixada pelo cli, existem outras diferenças mais não impactaram no build do projeto, como por exemplo:

Trecho original:
resolve    : {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    },

trecho informado na versão do curso:
resolve    : {
        alias     : {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },

Mesma situação da 1º, fiquei com a versão baixada no cli.

Bom, agora sim o projeto esta funcionando 100%, com importação de cdss e lazy load.

Mais uma vez, obrigado pela atenção.

Então o problema era a duplicidade da regra? Bom saber que resolveu!

Sucesso e bom estudo meu aluno.