JeffreyWay / laravel-elixir-vueify

This is a very thin wrapper for Laravel Elixir and the Browserify Vueify plugin.
156 stars 30 forks source link

Running gulp --production does not remove vue debug messages #12

Closed micheleivani closed 8 years ago

micheleivani commented 8 years ago

I run gulp --production it builds and minifies my file but the vue lib remains the dev one and in my console the debug messages about vue are printed.

Checking the vue js documentation I found this http://vuejs.org/guide/application.html#Browserify and it suggests

NODE_ENV=production browserify -e main.js | uglifyjs -c -m > build.js

"Vue automatically applies envify transform to itself and makes warning blocks unreachable"

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

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

How can achive the goal to use the production version vue js with laravel-elixir?

Thank you in advance

edbizarro commented 8 years ago

+1

same problem here

even with export NODE_ENV=production && gulp --production

nigelmst commented 8 years ago

+1

FinucaneDesign commented 8 years ago

+1

mrcsmcln commented 8 years ago

+1

milose commented 8 years ago

+1

However, a workaround for this issue is to add these three lines when building for production:

var Vue = require('vue')

// Comment these three for local build.
Vue.config.devtools = false
Vue.config.debug = false
Vue.config.silent = true
toby1991 commented 7 years ago
export NODE_ENV=production && gulp --production
hootlex commented 7 years ago

Another workaround is to conditionally load vue.min.js using aliasify instead of turning off logging and devtools .

To do so, in the gulpfile.js pick the vue file you want to load and append it in the aliasify transformer.

const vue = elixir.config.production ? "vue/dist/vue.min.js" : "vue/dist/vue.js"

elixir.config.js.browserify.transformers.push({
  name: 'aliasify',
  options: {
    "aliases": {
      "vue": vue
    }
  }
})

elixir.config.production will be true when you run gulp --production.

Hope it helps

vrkansagara commented 7 years ago

Or if you want to use webpack way, use following line(s)

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production') // default value if not specified
            }
        })
    ]
};

and add into app.js file as bellow code

Vue.config.devtools = process.env.NODE_ENV != 'production';
Vue.config.silent = process.env.NODE_ENV == 'production';