browserify - 带有 vue-router 的 Vue JS 不加载 vueified 组件

Question

我正在开发一个 Web 应用程序，该应用程序将 vue-router 用于具有 Laravel 5 后端的 SPA。它为通过 laravel-elixir-vueify 运行的应用程序组件使用 .vue 文件，以创建所需的 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。

主视图

@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 包以确保所有内容都已正确安装并具有正确的依赖项，并且此后一直有效。