Level 7
Were you able to find a solution to this? I have the same issue as well.
Sep 20, 2016
9
Level 4
Disabling Vue Devtools in Production
I'm a bit stuck trying to get Vue Devtools disabled when compiling to production using "gulp --production". It's compiling and minifying properly, but the dev tools are still present when viewing site in production server.
Any help getting me unstuck would be much appreciated.
package.json
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"vue": "^1.0.26",
"vue-resource": "^0.9.3"
},
"dependencies": {
"moment": "^2.15.0",
"vue": "^1.0.26",
"vue-router": "^0.7.13"
}
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir(mix => {
mix.styles(['core.css', 'components.css', 'colors.css', 'typeahead.css', 'custom.css'], 'public/css/theme.css')
.webpack('app.js');
});
Level 4
@stevepop - No, never found a solution, but I did find a workaround.
I put the below in my resources/js/app.js file
/**
* Uncomment below when compiling to production
*/
Vue.config.devtools = false
Vue.config.debug = false
Vue.config.silent = true
This will prevent vue tools in Chrome. But, when developing locally, I comment these lines out. So, you just need to make sure these lines are not there before you compile for production.
3 likes
Level 9
I haven't tested this myself, but how about putting those lines into disabledevtools.js and using a package like gulp-environments to add it to your pipeline on production only?
Level 8
I was able to solve this, by adding those lines into a file called prod.env.js and adding this line into my gulpfile.
Now I can safely use --production, and be sure that the debug mode is't enabled on my production environment.
elixir.config.production ? mix.webpack(['app.js', 'prod.env.js'], 'public/js/app.js') : mix.webpack('app.js');
5 likes
Level 6
I spent about an hour on this. I had run npm run production to deploy to a test server and forgot to npm run watch afterwards. This is in 5.4 with web pack.
Level 19
I do as @mass6 says. Add an env variable and check if it is in a production enviroment and add his code.
This is the link to see how to create that env variable:
https://laravel.com/docs/5.4/mix#environment-variables
In resources/js/app.js
if (process.env.MIX_APP_ENV === 'production') {
Vue.config.devtools = false;
Vue.config.debug = false;
Vue.config.silent = true;
}
3 likes
Level 5
@hasusuf solution works beautifully. Love the separation of production logic and hangs off the gulp --production flag already set on elixir.
Much appreciated!
Level 41
I'm not sure if I want to create Webpack config specifically for this one option (I have Laravel 5.3). Will these options work "runtime"? I mean, if I do the following in my app.js file:
if (location.hostname.indexOf('production-domain.com') === -1) {
Vue.config.debug = true;
} else {
Vue.config.devtools = false;
Vue.config.debug = false;
Vue.config.silent = true;
}
Level 1
I disable it by add this into the .env file
MIX_NODE_ENV = production
then run:
npm run production
1 like
Please or to participate in this conversation.