Implementation of multi-environment configuration (.env) of vue project

Before I got involved in multi-environment configuration, it felt so advanced, but after actually operating it, it felt just so-so. Here I will describe the problems I encountered and the solutions. If there is anything wrong, you are welcome to point it out.

What is multi-environment configuration and why do we need it?

The most common multi-environment configuration is the development environment configuration and the production environment configuration (that is, the online configuration). In many cases, the domain name and some configuration items in our development environment are different from those in our production mode. At this time, we need to perform multi-environment configuration, otherwise it will be troublesome to change a wave of data every time we release a version. Another situation is that your two projects use a set of codes, but in the end they have to be packaged into different packages. In this case, multi-environment configuration will greatly improve development efficiency.

Where is the .env file configured?

The .env file is configured in the root directory of your project at the same level as package.json as shown below.

How to configure .env files and how many to configure?

How to name the .env file?
When I first looked it up online, many bloggers said that the name must be
.env.development Configuration file for the development environment
.env.production Configuration file for the production environment
Actually, it is not . If you are configuring a development environment and a production environment, then there is nothing wrong with naming it this way. However, if you are using common code for multiple projects, then naming it this way is a bit inappropriate. So the naming format for this part only needs to start the file with .env, and you can use any name you want for the rest .

Configuration of .env file

This section is about configuring whatever you want to use. For example, if I want to get a name globally for the project, you can just configure it in .env. Below I will describe in detail how to get the value.

When you run npm serve or npm run build, the .env configuration will be used by default.

icon:

//This only needs VUE_APP_***. It is ok to name it in this format. You can use uppercase or lowercase at the end depending on your mood.
VUE_APP_NAME = 'Lou Yuanyang'
VUE_APP_HTTPS = 'http://www.louhc.com/'
VUE_APP_ABBREVIATION = 'louhc'
VUE_APP_LOGO = 'louhc'

After the default .env file is configured, we then configure the .env file with special requirements, for example, I want to use a different name in another environment. For example, the .env.bsy file. .bsy is a name I wrote randomly and can be customized.

//This only needs VUE_APP_***. It is ok to name it in this format. You can use uppercase or lowercase at the end depending on your mood.
VUE_APP_NAME = 'Baishan Cloud'
VUE_APP_HTTPS = 'http://www.louhc.com:82/'
VUE_APP_ABBREVIATION = 'bsy'
VUE_APP_LOGO = 'bsy'

And so on, you can configure as many as you want.
After the .env file is configured, we should configure the running environment

How to configure the operating environment

Find the package.json file, as shown below

The names following build: and serve: are whatever you choose and must match them so that the corresponding configuration items can be found during runtime.

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:bsy": "vue-cli-service build --mode bsy",
    "build:kthz": "vue-cli-service build --mode kthz",
    "serve:bsy": "vue-cli-service serve --mode bsy",
    "serve:kthz": "vue-cli-service serve --mode kthz",
  },

Let me say a little more: .env is the default configuration item. When the environment configuration item is run, the default configuration item and the running environment configuration item will be merged. When the parameters are the same, the environment configuration item will be the main one. In simple terms, the default configuration item exists and the environment configuration item also exists. At this time, the value of the environment configuration item that is run will be used as the basis. If the default configuration item exists and the environment configuration item does not exist, the value of the default configuration item can also be obtained when the environment configuration item is run.

How to get the value of global configuration item

Example: If I want to get VUE_APP_NAME = '娄渊洋' in js, then just write this line of code where you want to assign the value process.env.VUE_APP_NAME

console.log(process.env.VUE_APP_NAME) // In the default environment, the name printed is Lou Yuanyang bsy, and in the default environment, it is Baishanyun

If we want to use the value of the global configuration item in HTML, we need to assign it in return first, and then we can use { {}}, get the value you want to use.

How to run the environment

Run the default environment npm run serve
Run the specified environment npm run serve:bsy
Default environment packaging npm run build
Specify environment packaging npm run build:bsy
Just switch to a different environment name

This is the end of this article about the implementation of multi-environment configuration (.env) of the Vue project. For more relevant Vue multi-environment configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!