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 mo         


        

Answer 1

Webpack is used for almost all of my Vue projects, so I check to see if webpackHotUpdate is present.

 if (webpackHotUpdate) {
      console.log('In Dev Mode');
 }

It's present in the window object if the webpack dev server is running.

Answer 2

I know this is an old question but it may be helpful to new VueJS users to know this solution that I found in the current version of Vue (3.11):

When running in dev mode the property Vue.config.devtools is true, in production mode it is false!

Answer 3

Try using .env files.

You can specify env variables by placing the following files in your project root:

.env # loaded in all cases .env.local # loaded in all cases, ignored by git .env.[mode] # only loaded in specified mode .env.[mode].local # only loaded in specified mode, ignored by git

plus

Env Loading Priorities

An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env).

Docs: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables