How check if Vue is in development mode?

Question

When I run my Vue app, the console shows:

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html 

So now I want to check if Vue is in development from inside my templates by using:

console.log("mode is " + process.env.NODE_ENV) 

But that only logs undefined Is there a different way to find the NODE_ENV in Vue?

My webpack config has this part:

if (process.env.NODE_ENV === 'production') {   module.exports.devtool = '#source-map'   // http://vue-loader.vuejs.org/en/workflow/production.html   module.exports.plugins = (module.exports.plugins || []).concat([     new webpack.DefinePlugin({       'process.env': {         NODE_ENV: '"production"'       }     }),     new webpack.optimize.UglifyJsPlugin({       sourceMap: true,       compress: {         warnings: false       }     }),     new webpack.LoaderOptionsPlugin({       minimize: true     })   ]) } 

Perhaps relevant: I use typescript, so I included this type declaration:

declare var process: {     env: {         NODE_ENV: string     } } 

Answer 1

If you started with vue-cli (default webpack) then this should work:

  connection: process.env.NODE_ENV === 'development'     ? 'ws://localhost:5000'     : 'wss://myawsomeproject.org'