Usage analysis of global variable process in Vue project

1. What is process

        The process object is a global variable that provides information about the current Node.js process and controls it. It is often used to differentiate environments in Vue projects. The configurations for different environments are different, for example: distinguishing the URL address of the request based on global variables, whether to start eslint, special configurations for different environments, etc.

        You can create a new js file in the project, output the process, and get a configuration object. If there are too many, only some screenshots will be shown:

2. How to use process to distinguish environments

        There are three modes in the Vue project: production, development, test

        1.Mode

        Mode is an important concept in vue-cli, and there are three modes by default.

        For the commands mentioned below, you can take a look at the package.json file in the project and you will understand it at a glance.

1. development mode is used for vue-cli-service serve
2. production mode is used for vue-cli-service build and vue-cli-service test:unit
3. test mode is used for vue-cli-service test:unit

The command corresponding to development mode in our development environment is the serve command, which means that we run it in development mode after starting the project.

The production mode corresponds to the packaging command build. Package and run in production mode

You can override the default mode for the command line by passing the --mode option argument. For example, if you want to use development environment variables in the build command:

vue-cli-service build --mode development

        In summary, you can dynamically configure through commands to configure the corresponding configurations in the mode.

        We generally configure the request address through the .env file. For example, if there are multiple addresses, it can be flexibly configured through commands.

        2.process.env environment object

        There will be different environment variables in different modes

In development mode the value of NODE_ENV will be set to "development" and
in production mode the value of NODE_ENV will be set to "production" 

        3. Execution order of env files

.env is the configuration file that will be loaded in both development and production environments
. env.development is the configuration file that is loaded in the development environment
. env.production is the configuration file that is loaded in the production environment.

R&D environment loading order: .env .env.development. With the same variable name, the latter will overwrite the former.
Production environment loading order: .env .env.production. With the same variable name, the latter will overwrite the former.

3. Use of process

        1. Used to distinguish request addresses in different environments

        Create a new .env file, such as .env.development, and the variables declared in the file will be loaded in the development environment.

        Variables starting with VUE_APP_ will be statically embedded into the client-side package by webpack .definePlugin. When accessing process.env.VUE_APP_SECRET, add variables directly in the form of VUE_APP_*

# just a flag
NODE_ENV = 'development'

# base api
 VUE_APP_BASE_API = 'http://10.0.0.165:9588'

    Then request the url and you can get the corresponding value.

const service=axios.create({
    baseURL: process.env.VUE_APP_BASE_API,//请求地址
    timeout: 10000,//请求超时时间，如果超给改时间会中断
    // headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})