Vueify，Browserify和(禁用)热重播

Question

我以前使用过elixir & browserify。但是，我希望开始使用(HTML/CSS/JS)，这样我就可以将我的组件的所有部件Vueify放在一个文件中。

laravel-browserify似乎发生了一些变化

通常(我已发现)的答案如下：

var elixir = require('laravel-elixir');

var vueify = require('laravel-elixir-browserify').init("vueify");

elixir(function(mix) {
    // resources/assets/js/main.js
    mix.vueify('main.js', {insertGlobals: true, transform: "vueify", output: "public/js"});
});

这会引发错误：

Error: Cannot find module 'laravel-elixir/ingredients/commands/Utilities'
//...//
at Object.<anonymous> (C:\Users\BLANKED\Code\Project\node_modules\laravel-elixir-browserify\index.js:5:17)

所以，再找一遍，我发现

https://github.com/laravel/elixir/issues/203

elixir.config.js.browserify.transformers.push({
    name: 'vueify'
});

elixir(function(mix) {
    mix.browserify('main.js');
});

JeffreyWay的方法现在将gulp，但是它似乎不包含任何*.vue文件，取而代之的是一个vue-hot-reload-api函数来替代它们来检索它。

这似乎很棒，而且毫无疑问，我会发现它非常有用。

但它不起作用，我也想不出怎么让它失效。

而且一个非常基本的Vue应用程序不起作用。或者我做错了什么。

编辑：

为了说明这一点，我很乐意在没有热重加载工作的情况下gulp *.vue文件。

也许这只是在使用“宅基地”时起作用的东西，但我希望在不需要运行homestead的情况下进行一些快速而肮脏的测试。

最后编辑：

//gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.js.browserify.transformers.push({
 name: 'vueify'
});

elixir(function(mix) {
 mix.browserify('main.js');
});


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

new Vue({
    el: 'body',
    components: {
        app: App
    }
})

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

Answer 1

作为此承诺，Vueify现在包括在Laravel中。我发现当手动包含Vueify转换器时，它会运行两次，导致模板无法正确创建，只留下热重加载代码。

为了解决这个问题，我刚刚从我的gulpfile.js中删除了下面的行。

elixir.config.js.browserify.transformers.push({
    name: 'vueify'
});

您可能还必须确保您的laravel版本超过了3.4.0版本。