我似乎正在转换为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>
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-hot-reload-api的vue@1.0.26-兼容版本，如下所示：
那么看看你的依赖项的版本 .