First, the development environment

  • Front-end framework: VUE
  • Frame scaffold: VUE-CLI3

Second, why configure environment variables?

In the actual project development, we often experience project development phase, testing phase, and finally the online stage, each stage may be different to the requirement of the project code, so how can we adept at different stages under our project brings different effects, using different configuration parameters? We need to introduce the concept of environment.

Generally, a project will have the following three environments:

  • Development environment (development phase, local development version, usually with some debugging tools or additional accessibility)
  • Test environment (during the test phase, the pre-launch version, except for some bug fixes, will not be much different from the launch version)
  • Production environment (during the launch stage, the version officially released will be optimized and error reporting will be turned off)

In dealing with the official website project, take packaging and release production as an example. Every time after debugging using the interface of the development environment, when packaging, it is always necessary to find the request file, change it to the online address and then package it, such as the request file in the early packaging, which will be very troublesome to deal with

As development, we need to write some different code for each environment and make sure that the code runs in the right environment. So how can we determine the environment in the code and execute different code at the same time? This requires proper environment configuration and management.

Third, understand the environment configuration in VUE scaffolding

1. Configuration files

To start, we need to know the relationship between each environment variable file:

We can see from the figure above that each environment has a different configuration, and they also have an intersection, which is the configuration item that they all share. So how should we deal with this in Vue? Create the following files in the root directory to configure variables in different environments:

Env. Local # is loaded in all environments, but will be ignored by Git. Env.[mode] # is only loaded in specified modes like: Env.[mode]. Local # is only loaded in the specified mode, but is ignored by GitCopy the code

2. How to use it

Create a file called.env.stage, which indicates that it is loaded only in the stage environment. In this file, we can configure the following key-value pairs of variables:

NODE_ENV=stage
VUE_APP_TITLE=stage mode
Copy the code

How do we use the configured variable values in the project? It is easy to access process.env.[name], for example:

// vue.config.js

console.log(process.env.NODE_ENV); // development (output in terminal)
Copy the code

We want to output ‘development’ when we want to output ‘stage’, The reason is that the default setting of vue-cli-service serve command is development. We want the output to be stage, so we need to modify the command of serve script in package.json

"scripts": {
    "serve": "vue-cli-service serve --mode stage",}Copy the code

— Mode stage (webpack 4) –mode stage (webpack 4) –mode stage (webpack 4) Also, vue-cli-service build will use the default production environment.

But if you create a.env file and configure the same variable again, but with different values, for example:

NODE_ENV=staging VUE_APP_TITLE=staging mode VUE_APP_NAME=project

Env will be loaded by any environment, that is, the common configuration, so eventually we run vue-cli-service serve to print the stage, but if it is configured as above in the.env.stage.local file, you can print staging.

So.env.[mode]. Local overrides the same configuration as.env.[mode]. Env. Local overrides the same configuration under. Env.

It can be concluded that the weight of the same configuration item is:

.env.[mode].local > .env.[mode] > .env.local > .env

3. Environment injection

By creating the configuration file above, we successfully set up the project environment using the command line and can switch freely. However, it should be noted that the process.env printed in the front-end code of Vue may be different from the output in vue.config.js. Webpack injects process.env into client code via the built-in plug-in DefinePlugin.

/ / webpack configuration{... Omit codeplugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV) } }), ], ... Omit code}Copy the code

Since this is already done for us in the Vue-CLI 3.x wrapped Webpack configuration, we can print the value of process.env directly in the client code. This object can contain multiple key-value pairs, meaning that multiple values can be injected. However, after CLI encapsulation, only variables starting with VUE_APP_ in the environment configuration file can be injected, excluding special variables NODE_ENV and BASE_URL.

When we use environment variables in vue scaffolding, we must start with the prefix “VUE_APP_” to get them successfully

We configure.env.stage

NODE_ENV=stage2
VUE_APP_TITLE=stage mode2
NAME=vue
Copy the code

Print process.env in vue.config.js, terminal output:

{...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: 'stage2'.VUE_APP_TITLE: 'stage mode2'.NAME: 'vue'.BABEL_ENV: 'development'. }Copy the code

To print in main.js, the terminal outputs:

{
    "BASE_URL": "/vue/"."NODE_ENV": "stage2"."VUE_APP_TITLE": "stage mode2"
}
Copy the code

The extra BASE_URL is the value you set in vue.config.js. The default value is /, which is invalid in the environment configuration file.