browserify - vue-routerがvue化されたコンポーネントをロードしないVue JS

Question

Laravel 5 バックエンドを備えた SPA に vue-router を使用する Web アプリケーションを開発しています。必要な JavaScript を作成するために.vue実行されるアプリ コンポーネントのファイルを利用します。laravel-elixir-vueify

Vue とともに vue-router を正常にセットアップし、メインの Vue および Vue ルーター インスタンスと同じファイルで定義されたコンポーネントをロードできます。

ただし、ファイルに含まれているコンポーネントを要求しようとすると、問題が発生し.vueます。Vue インスタンスを調べたときに browserify / vueify が実行の成功を報告しているにもかかわらず、Vue dev-tools によってインスタンス内に表示される匿名のコンポーネント フラグメントのみがあり、router-view.

外部コンポーネントが正しくロードされていないように見えますが、コンソール内にエラーはありません。

さまざまなコードとファイルの例を次に示します。

gulpfile.js

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

ダッシュボードOverview.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ます。