Question

我使用了elixir＆amp; 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 应用无效。或者我做错了什么。

编辑：
为了说清楚，我会很高兴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。

Vueify，Browserify和（禁用）热重新加载

1 个答案: