typescriptwebpackvue.js

How check if Vue is in development mode?


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

Solution

  • For Vue 3 and Vite projects, use this from any js or vue file in your project:

    console.log(import.meta.env.DEV)
    console.log(import.meta.env.PROD)
    

    returns boolean value, depending on your environment.