I do a back office project. The test side wants the test interface, and the development side uses the production interface, which is equivalent to having two interfaces for different environments. Every time to manually change, it will be very troublesome, so, sorted out the data, the two environment to work out.

1. There are two default sentences in package.json after the project is created.

As shown below:

We need to add a test build environment and a production build environment. After addition, it will look like the picture below (two sentences selected by the box are added):

Add the following code:

    "test": "vue-cli-service build --mode test",
    "prod": "vue-cli-service build --mode prod"
Copy the code

2. Create two files in the root directory

As shown below:

Note: The name after env is the same as the name after –mode in package.json.

Let’s take a look at the code inside the two files (just write the following two lines):.env.prod:

NODE_ENV = 'prod' 
VUE_APP_TITLE = 'prod'
Copy the code

.env.test:

NODE_ENV = 'test' 
VUE_APP_TITLE = 'test'
Copy the code

OK, we’ve now separated the two environments.

Prod production environment; Test Test environment

3. The interface between the test environment and production environment changes when data is requested

API. Js: API. Js: API.

The code looks like this:

Var baseUrl = 'switch (process.env.vue_app_title) {case 'test':// baseUrl =' break case 'prod':// Production environment interface If (process.env.node_env == "development") {baseUrl = ""}Copy the code

4. Last step: Packing

When we package the production environment, run the command: NPM run prod

When we package the test environment, run the command: NPM run test