Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to configure environment variables for vue cli4.0, Xiaobian thinks it is quite practical, so share it with you as a reference, I hope you can gain something after reading this article.

In projects built by vue-cli, there are 3 modes by default, as shown below:

My personal understanding is:

When you execute npm run serve, the corresponding environment is the development environment;

When you execute npm run build, the corresponding environment is the production environment.

If you are developing more than three projects, what should you do? For example, in my development projects, there are local environment (local), development environment (development), test environment (devtest), pre-release environment (beta), production environment (production). Please remember the English in brackets.

Come on, draw a dragon with me on the left, draw a rainbow on your right ~ After drawing, start to enter the theme ~

--------------------------------

1. Create different environment variable files

As the official documentation says, you can set environment variables specific to a particular mode by appending suffixes to.env files. I have five environments here, so I configured five.env files. As shown below:

2. Add content to.env file

The basic format is as follows:

NODE_ENV= environment name VUE_APP_URL= corresponding environment address

The configuration of my local environment is as shown below:

I use easy-mock simulation data locally, so the address configured is the mock interface address.

3. Add execution statements corresponding to different environments in package.json

As the official documentation says, different modes can be configured by passing--mode. My own project configuration is as follows:

Please note serve and build in my profile.

4. use

The file has been created and the configuration statement has been written. How do you use it?

Which environment do you need, execute the command statement of which environment.

For example, if I need a local environment now, I will execute npm run local-serve. As shown below:

Then get the environment name through process.env.NODE_ENV; get the url corresponding to the environment through process.env.VUE_APP_URL

For example, in the axios request, we can set its baseURL to process.env.VUE_APP_URL, as shown in the following figure:

The "/web" at the end is based on my own interface. Don't write "/web" too.

If you are unsure which environment variable you are in, check out console.log ("current environment variable: "+process.env.NODE_ENV) and console.log ("current environment path: "+process.env.VUE_APP_URL).

In my project, there are two things:

The output is the environment variables configured in the.env.local file.

To understand this better, let's run another statement, npm run serve, and see what the environment variable is at this point.

Why is that?

Because npm run serve points to.env. development by default, the environment I configure in it is the content output above. The configuration of env. development is as follows:

In short, whatever environment variable you need, just [environment variable corresponding to npm run] is done!

About "how to configure environment variables vue 4.0" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.