Vue creates new environment variables

1. [Environment Variables] Background:

• In our actual project development, we generally distinguish between several environments, namely the development environment, test environment and production environment. Of course, we do not rule out the pre-release environment. Generally speaking, these four environments are enough for us used.

2. Steps to create a new environment:

2.1 Create 4 new environment variable files in the root directory:

• .env.dev【Development environment】
• .env.test【Test environment】
• .env.uat【Pre-release environment】
• .env.prod [production environment]
• The contents of the files in the four environments are as follows:

//.env.dev文件
NODE_ENV = dev
# base url
VUE_APP_BASE_URL ="https://dev.it98k.cn"--------------------------------------------------------------//.env.test文件
NODE_ENV = test
# base url
VUE_APP_BASE_URL ="https://test.it98k.cn"--------------------------------------------------------------//.env.uat文件
NODE_ENV = uat
# base url
VUE_APP_BASE_URL ="https://uat.it98k.cn"--------------------------------------------------------------//.env.prod文件
NODE_ENV = prod
# base url
VUE_APP_BASE_URL ="https://prod.it98k.cn"--------------------------------------------------------------

2.2 Then modify the startup command under package.json【scripts】:

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

• After this modification, the command to start the project locally is still: npm run serve
• The command to package the test environment is: npm run build:test
• The command to package the pre-release environment is: npm run build:uat
• The command to package the production environment is: npm run build:prod