我正在开发一个 Web 应用程序，它使用 vue-router 进行带有 Laravel 5 后端的 SPA。它利用.vue运行的应用程序组件的文件laravel-elixir-vueify来创建所需的 JavaScript。
我已经成功设置了 vue-router 和 Vue，并且可以加载与主 Vue 和 Vue 路由器实例在同一文件中定义的组件。
但是，当我尝试并需要一个包含在.vue文件中的组件时，问题就来了。尽管当我检查 Vue 实例时 browserify / vueify 报告成功运行，但 Vue 开发工具仅在实例中显示匿名组件片段，并且在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