Using .env files in vue

1. Function: In the vue project, use .env files to load request domain names, environment variables, etc. under different environments.

2. Configuration (take .env.test file as an example):

.env.test① Create a new file with the name in the project root directory
② The content of the file is as follows:

The name of the variable must VUE_APP_start with

# just a flag
ENV = 'test'

# base api
#VUE_APP_BASE_API = '/api'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:8080'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:80/'
#VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'
VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'

Add the following code to the configuration file, which can be used to increase the speed of hot updates:
VUE_CLI_BABEL_TRANSPILE_MODULES = true;

③ Get variables:process.env.VUE_APP_XXX

3. Load:

• .env.development: Used in local and development environments, only loaded during development (name fixed).
• .env.production: Used in production (formal) environment, only loaded in production environment (name fixed).
• .env.test: Used for test environment, only loaded in test environment (custom name).
  
• Command configuration:

Write in package.json(mainly added after the original command --mode 名称)

{
    
    
  "name": "vue3_work",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    "serve-test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test"
  }
}