当前位置: 动力学知识库 > 问答 > 编程问答 >

laravel - Vueify, Browserify and (disabling) Hot Reload

问题描述:

I've used elixir & browserify before. However, I want to start using Vueify so I can have all my component's parts (HTML/CSS/JS) in 1 file.

It seems something has changed with laravel-browserify

The commonly (that I have found) answer is the following:

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"});

});

This throws the error:

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)

So, some more searching around, and I find

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

elixir.config.js.browserify.transformers.push({

name: 'vueify'

});

elixir(function(mix) {

mix.browserify('main.js');

});

JeffreyWay's method will now gulp, however it doesn't seem to include any of the *.vue files, and instead replaces them with a vue-hot-reload-api function to presumably retrieve it.

Which seems great, and something that - no doubt - I will find very useful.

But it's not working, and I cannot figure out how to disable it.

And a very basic Vue App is not working.

Or what I am doing wrong.

Edit:

To make it clear, I would be happy to gulp *.vue files without the hot reload working.

Perhaps this is something that just works when using homestead, but I'm hoping to do some quick & dirty testing without having to run up homestead.

Final edit:

//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>

网友答案:

As of this commit Vueify is now included within Laravel Elixr. I found that when including the Vueify transformer manually it is run twice causing the template to not properly be created, leaving just the hot-reload code.

To fix the issue I just removed the following lines from my gulpfile.js.

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

You may also have to ensure your version of laravel-elixr is over version 3.4.0.

分享给朋友:
您可能感兴趣的文章:
随机阅读: