In-depth explanation of modes and environment variables in Vue CLI

Preface

In the development of actual projects, we generally go through the project development phase, testing phase and final online phase. The requirements for project code in each phase may be different. So how can we easily make our projects present different effects and use different functions in different stages?
Here we need to introduce the concept of environment. Mode and environment variable description in official documentation

Generally, a project will have the following three environments:

• Development environment (development phase, local development version, usually using some debugging tools or additional auxiliary functions);
• Test environment (testing phase, pre-launch version, except for some bug fixes, basically no big difference from the online version);
• Production environment (online stage, the version officially released to the public is generally optimized and error reporting is turned off);
  

As a developer, we may need to write some different codes for each environment and ensure that these codes run in the correct environment. So how should we determine the environment of the project in the code and execute different codes at the same time? This requires us to configure and manage the environment correctly.

1. Configuration File

To correctly configure the environment, we first need to understand the relationship between different environment configurations, as shown in the figure:

From the above picture, we can see that each environment actually has its own different configurations, and they also have intersections. The intersections are the configuration items that they all share. So how should we deal with them in Vue?

We can create files of the following format in the root directory to configure variables in different environments:

.env # loaded in all environments
.env.local # Loaded in all environments, but ignored by git
.env.[mode] # Only loaded in the specified mode, such as: .env.development, .env.production
.env.[mode].local # Only loaded in the specified mode, but will be ignored by git

For example, create a file named .env.development, which indicates that it is only loaded in the development environment.

In this file, we can configure the following key-value pairs of variables:

# Development environment configuration NODE_ENV=development
VUE_APP_API_BASE_URL=https://www.baidu.com/

How do we access these variables in vue.config.js at this time? Use process.env.[name] to access it.

// vue.config.js
console.log(process.env.NODE_ENV); // development (output in terminal)

When you run the npm run serve command, you will find that the output is development, because the default environment set for the vue-cli-service serve command is development.

If we need to modify it, we can change the command of the serve script in package.json to:

// package.json
"scripts": {
  "serve": "vue-cli-service serve --mode stage",
},

–mode stage actually changes the mode configuration item in webpack 4 to stage, and it will read the configuration under the corresponding .env.[model] file.
If no corresponding configuration file is found, it will use the default environment development. Similarly, vue-cli-service build will use the default environment production.

If you create another .env file, configure the same variables again, but with different values.

# Environment configuration NODE_ENV=ENV
VUE_APP_API_BASE_URL=http://www.soso.com/

Because the .env file will be loaded by all environments, that is, the public configuration, then which one will be printed out when vue-cli-service serve is finally run?

The answer is development.

But if the .env.development.local file is configured as above, the answer is ENV.

So .env.[mode].local will override the same configuration under .env.[mode].

Similarly, .env.local will override the same configuration under .env.

From this we can conclude that the weights of the same configuration items are: .env.[mode].local > .env.[mode] > .env.local > .env
Note: In addition to the same configuration item with a larger weight covering the smaller one, different configuration items will be merged, similar to the usage of Object.assign in Javascript.

2. Environmental injection

By creating the above configuration files, we have successfully set up the project environment using the command line and can switch freely. However, please note that the process.env printed in the front-end code of Vue may be different from the output in vue.config.js. This requires popularizing a knowledge point: webpack injects process.env into the client code through the DefinePlugin built-in plug-in.

// webpack configuration {
    ...
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
    ], 
    ...
}

Since the webpack configuration encapsulated by vue-cli 3.x has already completed this function for us, we can directly print out the value of process.env in the client code. The object can contain multiple key-value pairs, which means that multiple values ​​can be injected. However, after being encapsulated by vue-cli, only variables starting with VUE_APP_ in the environment configuration file are supported for injection, except for the two special variables NODE_ENV and BASE_URL.

For example, write in the .env.development.local file with the highest weight:

# Development environment configuration NODE_ENV=developmentLocal
VUE_APP_API_BASE_URL=https://www.baidu.com/
NAME=javascript

Then we try to print process.env in vue.config.js, and the terminal output is:

{
    ...
    npm_config_ignore_scripts: '',
    npm_config_version_git_sign: '',
    npm_config_ignore_optional: '',
    npm_config_init_version: '1.0.0',
    npm_package_dependencies_vue_router: '^3.0.1',
    npm_config_version_tag_prefix: 'v',
    npm_node_execpath: '/usr/local/bin/node',
    NODE_ENV: 'developmentLocal',
    VUE_APP_API_BASE_URL: 'https://www.baidu.com/',
    NAME: 'javascript',
    BABEL_ENV: 'development',
    ...
}

You can see that the output content contains a lot of npm information in addition to the variables in the environment configuration, but when printing in the entry file main.js, you will find the output:

{
  BASE_URL: "/",
  NODE_ENV: "developmentLocal",
  VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}

It can be seen that variables that do not start with VUE_APP_ are filtered during injection. The extra BASE_URL is the value you set in vue.config.js, which defaults to /. It is invalid in the environment configuration file.

3. Additional Configuration

In the above, we configure different variable values ​​for different environments of the project by creating new configuration files, which can realize basic environment management of the project. However, the parameters in configuration files such as .env currently only support static values, and dynamic parameters cannot be used. In some cases, specific requirements cannot be met.

At this time, you can create a new config folder in the root directory to store some additional configuration files.

/* Configuration file index.js */
 
// Public variables const com = {
  IP: JSON.stringify('xxx')
};

module.exports = {
  // Development environment variables dev: {
    env: {
      TYPE: JSON.stringify('dev'),
      ...com
    }
  },
  // Production environment variables build: {
    env: {
      TYPE: JSON.stringify('prod'),
      ...com
    }
  }
}

The above code divides environment variables into public variables, development environment variables and production environment variables. Of course, these variables may be dynamic, such as the user's IP address.
Now we need to inject these variables in vue.config.js, we can use chainWebpack to modify the value in DefinePlugin:

/* vue.config.js */
const configs = require('./config');
 
// Used to do the corresponding merge processing const merge = require('webpack-merge');
 
// Determine which configuration to use based on the environment const cfg = process.env.NODE_ENV === 'production' ? configs.build.env : configs.dev.env;
module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      let name = 'process.env';
      // Use merge to ensure the original value remains unchanged args[0][name] = merge(args[0][name], cfg);
      return args
    })
  },	
}

Finally, the object containing the dynamic configuration can be successfully printed out on the client:

{
  BASE_URL: "/",
  IP: "xxx",
  NODE_ENV: "developmentLocal",
  TYPE: "dev",
  VUE_APP_API_BASE_URL: "https://www.baidu.com/",
}

4. Actual Scenarios

Use process.env.xxx to access properties

<script>
export default {
  data() { 
    return {
      BASEURL:process.env,
    } 
  },  
  mounted(){
 	console.log(this.BASEURL.VUE_APP_API_BASE_URL) // https://www.baidu.com/
  }
}
</script> 

// Create an axios instance const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000
})

Conclusion

The configuration and management of the environment plays a vital role in the construction of the project. By configuring different environments for the project, we can not only increase the flexibility of development and improve the scalability of the program, but also help us understand and analyze the operation mechanism of the project in different environments and establish a global concept.

This is the end of this article about modes and environment variables in Vue CLI. For more relevant Vue CLI modes and environment variables, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!