Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined

Question

我已经将 Elixir 设置为使用带有热重载插件的 Vueify。一切都编译正常，但我的编译文件出现控制台错误，Vue 组件似乎没有转换为 html，它仍然显示 <app></app> 标签。如果我从 elixir 中删除热重载插件，页面呈现正常。

错误是：

Uncaught TypeError: Cannot read property 'indexOf' of undefined

控制台输出它

[HMR] Attempting websocket connection to http://localhost:3123
app.js:10904 Uncaught TypeError: Cannot read property 'indexOf' of undefined
[vue-devtools] Ready. Detected Vue v1.0.26
[HMR] Websocket connection successful.
[HMR] Updated modules ["resources/assets/js/embeds/html/app.vue"]

因此值得一提的是，它正在接收来自热重载的消息，只是因为这个错误而没有呈现页面。错误发生在已编译的 app.js 文件中的以下行。

// compat with < 2.0.0-alpha.7
  if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
    initHookName = 'init'
  }

这是我的文件

gulpfile.js

var elixir = require('laravel-elixir');
var gutil = require('gulp-util');
require('laravel-elixir-vueify');

if (gutil.env._.indexOf('watch') > -1) {
    //  Add the browserify HMR plugin
    elixir.config.js.browserify.plugins.push({
        name: 'browserify-hmr',
        options: {}
    })
}

elixir(function (mix) {
    mix.browserify('embeds/html/main.js', 'public/js/embeds/html/app.js');
});

main.js

var Vue = require('vue')
var App = require('./app.vue')

new Vue({
    el: 'body',
    components: {
        app: App
    },
    created: function() {
        console.log('test');
    }
})

app.vue

<style>

</style>

<template>
    <div id="player-wrapper">
        {{ msg }}
    </div>
</template>


<script>
    export default {
        data () {
            return {
                msg: 'Hello world!'
            }
        }
    }
</script>

index.blade.php

<body>
    <app></app>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>

Answer 1

可能是版本兼容性问题，Vue和Vue-hot-reload-api.

举个例子，vueify@8.7.0目前依赖vue-hot-reload-api@1.3.2，貌似只能兼容Vue@1.x.

根据个人经验，我在使用 vue-hot-reload-api@2.x 和 vue@1.x 时发生了这个特定错误，尽管我还没有测试过反过来。

Vue-hot-reload-api's Github readme最上面的一个注释，似乎也验证了这个问题。

就我而言，我刚刚重新安装了 vue@1.0.26 兼容版本的 vue-hot-reload-api，如下所示：

npm install --save-dev vue-hot-reload-api@^1.3.2

所以看看你的依赖项的版本。

Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined

Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined

javascript

browserify

vue.js

laravel-elixir