Vue JS с vue-маршрутизатором, не загружающим компоненты vueified

Question

Я разрабатываю веб-приложение, которое использует vue-router для SPA с бэкэндом Laravel 5. Он использует файлы .vue для компонентов приложения, которые запускаются через laravel-elixir-vueify, чтобы создать необходимый JavaScript.

Я установил vue-router вместе с Vue успешно и могу загрузить компоненты, определенные в том же файле, что и основные экземпляры маршрутизатора Vue и Vue.

Проблема возникает, когда я пытаюсь выполнить компонент, который содержится в файле .vue. Несмотря на то, что в браузере/vueify отчет о успешном запуске, когда я проверяю экземпляр Vue, в нем есть только анонимные фрагменты компонентов, показанные в экземпляре инструментами Vue dev, и никакой разметки не размещается внутри router-view.

Там нет ошибок в консоли, хотя это выглядит так, как будто не загружается правильно внешние компоненты.

Примеры различного кода и файлов следующим образом:

gulpfile.js

... 
    mix.browserify('dashboard.js'); 
... 

dashboardOverview.vue

<template> 
    <div> 
     <h1>Overview</h1> 
     <img src="//placehold.it/320x100" style="width: 100%; margin-bottom: 15px" alt="Pathway Visualisation" /> 
    </div> 
</template> 

<script> 

    export default {} 

</script> 

Где dashboardOverview.vue находится в resources\assets\js\components\dashboardOverview.vue.

Главная Просмотреть

@section('content') 
<div id="app"> 
    <h1>Welcome</h1> 
    <a v-link="{ path: '/activate' }">Activate</a>| 
    <a v-link="{ path: '/' }">Overview</a> 
    <router-view></router-view> 
</div> 
@endsection 

Это дополняется следующим JavaScript:

var Vue = require('vue'); 
var VueRouter = require('vue-router'); 

Vue.use(VueRouter) 

/* Components */ 
var dashboardOverview = require('./components/dashboardOverview.vue'); 
var userSetup = require('./components/userSetup.vue'); 

var App = Vue.extend(); 

var router = new VueRouter() 
Vue.config.debug = true 

router.map({ 
    '*': { 
     component: Vue.extend({template: '<h4>404 Not found</h4>'}) 
    }, 
    '/': { 
     component: dashboardOverview 
    }, 
    '/activate': { 
     component: userSetup 
    } 
}) 

router.start(App, '#app') 

Где dashboard.js находится в resources\assets\js\dashboard.js.

Answer 1

Я установил минимальный тестовый проект и смог успешно достичь того, к чему я стремился.

Конечным результатом этого были некоторые пакеты Node, которые имели несовместимые версии, а также пакеты, которые не требовались.

Я обрезка моего packages.json файла, а затем переустановить требуемые vue, vue-router и laravel-elixir-vueify пакетов, чтобы гарантировать, что все был правильно установлен с правильными зависимостями и он работал с тех пор.