Vueify、Browserify 和（禁用）热重载

Question

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

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 App 无法正常工作。 或者我做错了什么。

编辑：
为了清楚起见，我很乐意 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

截至this commit Vueify 现在包含在 Laravel Elixr 中。我发现当手动包含 Vueify 转换器时，它会运行两次，导致模板无法正确创建，只留下热重载代码。

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

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

您可能还必须确保您的 laravel-elixr 版本高于 3.4.0 版本。