Was*_*sim 3 javascript browserify vue.js laravel-elixir
我已经设置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>
它可能是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的Github自述文件的顶部,似乎也验证了这个问题.
就我而言,我刚刚重新安装了vue-hot-reload-api的vue@1.0.26-兼容版本,如下所示:
npm install --save-dev vue-hot-reload-api@^1.3.2
那么看看你的依赖项的版本.