An overview of the

In our open environment, there are three environments: local, test, and online. Therefore, we need to configure the project interface request address according to the different environment. We can use the global object process.env provided by Node

Usage (Vue CLI setup project)

Using the command — Mode environment

"Vue-cli-service serve" : "vue-cli-service serve",// develoment "serve:pro": "Vue-cli-service serve --mode production", // modify process.env.NODE_ENV=production "build:test": "Vue-cli-service build --mode development",// modify process.env.node_env =development "build:pro": "Vue-cli-service build",// package default process.env.node_env =development "test:unit": "Vue -cli-service test:unit",// modify default package process.env.node_env =production "start": "http-server dist"Copy the code

Axios configuration file

import axios from "axios"; axios.baseUru=process.env.NODE_ENV=="development" ? "Baseurl Test address" : "BaseurL online environment"Copy the code

More configurations (Environment variables)

Actual engineering projects, will inevitably have a lot of online formal environment for the development environment and the configuration of the variables, such as the interface to request address mentioned above, if you are using to the three parties authorized WeChat login, and appid, also system such as the background, we have upload file to import the template download address and so on, as long as you want in a different environment, setting different variables, Vuecli scaffolding can be configured for different Node environments:

Env files are created based on the environment variables following our package.json command –mode. These files can then be injected into process.env based on the –mode environment. Env will be injected regardless of the environment, directly create the following three files in your scaffold root directory:

Corresponding file contents

The package script remains the same as above:

Run NPM run serve:dev

Access the variables we defined in the APP component (you can see that the test environment can access them)

Run NPM Run Serve: Pro (you can see the production environment is accessible now)

Caution (Trampling experience)

In order for the project to be able to access the environment variables, it is necessary to use theVUE_APP_ start definitionI wondered at first, but then I understood the official saying, so this is an experienceThen you can configure the project according to your own needs.

Conclusion:

The document may sometimes say that the cloud is in the fog, we need to practice more helpful to you remember to like oh, do not regularly update the experience in the work