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

This article mainly introduces the relevant knowledge of "vue project multi-environment configuration method". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this "vue project multi-environment configuration method" article can help you solve the problem.

What is multi-environment configuration and why multi-environment configuration?

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 names and some configuration items in our development environment are different from those in our production mode. At this time, we need to configure multiple environments, otherwise we have to change a wave of data for each release. Another situation is that your two projects use the same set of code, but in the end, you have to package them into different packages, so the multi-environment configuration greatly improves the development efficiency at this time.

Where to configure the .env file

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 files are configured?

How is the .env file named?

At first, when I looked it up on the Internet, many bloggers said that the name had to be named

Configuration files under the .env.development development environment

Configuration files in .env.production production environment

Actually, no, it's understandable to name it this way if you are configuring a development environment and a production environment, but if you are a multi-project common code, the naming is a bit out of place. So the naming format of this piece only needs to be .env at the beginning of the file, and you can have whatever name you want.

Configuration of .env file

This piece is that you can configure whatever you want to use. For example, I want to get a name in the project as a whole, then you can configure it directly in .env. I will describe how to take the value in detail below.

When npm run serve or npm run build, it defaults to .env configuration.

The figure shows:

/ / this piece only needs to be named VUE_APP_*** in this form to ok, followed by uppercase or lowercase this piece depends 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, such as I want to use a different name in another environment. For example, the .env.bsy file .bsy is my random name. This piece can be customized.

/ / this piece only needs to be named VUE_APP_*** in this form to ok, followed by uppercase or lowercase this piece depends on your mood. VUE_APP_NAME = "White shirt 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 running environment

Locate the package.json file, as shown below

Build: and serve: followed by the name you randomly choose must correspond to this at run time to find the corresponding configuration item.

"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",}

Again, one more point: .env is the default configuration item. when running the environment configuration item, it will merge the default configuration item with the running environment configuration item. when the parameters are the same, it will be dominated by the environment configuration item. to put it simply, the default configuration item exists, and the environment configuration item also exists. The value of which environment configuration item is run at this time will prevail, if the default configuration item exists. If the environment configuration item does not exist, you can also get the value of the default configuration item when you run the environment configuration item.

How to get the value of a global configuration item

Example: how do I want to get VUE_APP_NAME = 'Lou Yuanyang' in js, then just write this line of code where you want to assign the value to process.env.VUE_APP_NAME

Console.log (process.env.VUE_APP_NAME) / / what is printed in the default environment is the white shirt cloud in the bsy environment of Lou Yuanyang.

If our item uses the value of the global configuration item in html, we need to assign a value in return before we can get the value you want through {{}}.

How to run the environment

Run the default environment npm run serve

Run the specified environment npm run serve:bsy

Default environment packages npm run build

Specify the environment to package npm run build:bsy

Just switch between different environment names

This is the end of the content about "the method of multi-environment configuration of vue project". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.