Multiple environment variables

The output process of a project

1 Customers have needs , And looking for companies to make

2 Company receipt , And submit it to the product manager to make a prototype

3 After the prototype drawing is made , Confirm with the customer

4 To hand over to ui Conduct project design

5 Design complete , The front and rear ends start working , Making pages and background data

6 As the front end , If there is no background data at the beginning , have access to json Perform background data simulation

7 Last , The front and rear ends shall be debugged together , Of course , When there is data at the beginning , The front end needs to be debugged when it is working

8 Project completion , To be tested , Change bug

9 Go online after passing the test , A project is completed

What are the environment variables

development environment development    Use npm run serve start-up

Test environment test    Use npm run test start-up

Online environment  production    Use npm run build package

Why configure environment variables

Easy to modify , No need to restart the project , No need to change the code

Requirements for environment variable configuration

  With VUE_APP_ start , Can pass process.env.VUE_APP_ visit .
  such as ,VUE_APP_ENV = 'development' adopt process.env.VUE_APP_ENV visit .
  except VUE_APP_* Beyond variables , There are two special variables  NODE_ENV and  BASE_URL
 

How to configure multiple environment variables

 1 stay package.json  Medium   scripts  Set multiple environment variables in

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

  2  newly build  .env.development File write development environment settings

NODE_ENV = "development"

VUE_APP_BASE_URL = " Public code snippet of the request URL of the development environment "

      newly build  .env.test File write test environment settings

VUE_APP_BASE_URL = " Request code snippet for the test environment "

      newly build  .env.production File write online environment settings

VUE_APP_BASE_URL = " Request code snippet for the online environment "

3  Revised to axios Request configuration request common code

const server = axios.create({
    baseURL:process.env.VUE_APP_BASE_URL,
    timeout: 6000
})

matters needing attention ：

1 All words are fixed properties , Do not modify

2 After configuration, you need to restart the project