我正在开发一个Web应用程序，它使用vue-router用于带有Laravel 5后端的SPA . 它将 .vue 文件用于通过 laravel-elixir-vueify 运行的应用程序组件，以便创建所需的JavaScript .
我已经成功设置了vue-router和Vue，并且可以加载与主Vue和Vue路由器实例在同一文件中定义的组件 .
但是当我尝试并且需要一个包含在 .vue 文件中的组件时，问题就出现了 . 尽管在检查Vue实例时browserify / vueify报告成功运行，但实例中只有Vue dev-tools显示匿名组件片段，并且 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 .
Main View
@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 .
1 回答
我 Build 了一个最小的测试项目，并成功实现了我的目标 .
最终结果是一些具有不兼容版本的Node包，以及不需要的包 .
我修剪了我的
packages.json文件，然后重新安装了所需的vue，vue-router和laravel-elixir-vueify软件包，以确保所有内容都已正确安装并具有正确的依赖关系，并且此后一直有效 .