【发布时间】：2016-07-01 15:08:36
【问题描述】：
我已将 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>
【问题讨论】：
标签： javascript browserify vue.js laravel-elixir