Vue.js - Determine whether the current environment is a development environment or a production environment (with sample)

1. Judgment example
(1) Sometimes we need to determine whether the current project is in a development environment or a production environment in the code, and then execute different logic codes according to different environments. Here is a simple example:

if (process.env.NODE_ENV === "development") {
    
    
  alert("开发环境");
}else {
    
    
  alert("生产环境");
}

(2) If you are in a development environment (when executing npm run dev), the following results will be displayed:

(3) If you are in a production environment (when executing npm run build), the following results will be displayed:

2. Judgment principle
(1) There are two files dev.env.js and prod.env.js in the config folder of the project , which configure the variables of the development environment and the variables of the production environment respectively.

(2) Open the dev.env.js file and you can see that the NODE_ENV variable value is development.

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
    
    
  NODE_ENV: '"development"'
})

(3) Open the prod.env.js file and you can see that the NODE_ENV variable value is production.

'use strict'
module.exports = {
    
    
  NODE_ENV: '"production"'
}

Reprinted to: https://www.hangge.com/blog/cache/detail_2497.html