Vue environment variable configuration and use of environment variables

Vue's environment variable configuration provides a way to use different configurations in different environments, so that different configurations can be used in different scenarios such as development, testing and production. The following is a detailed explanation of Vue environment variable configuration and an example of using environment variables:

1. Create environment variable files:
 In the root directory of the Vue project, you can create multiple environment variable files, such as `.env`, `.env.production`, `.env.staging`, etc. These files correspond to different environment configurations.

2. Define variables:
 In the environment variable file, various variables can be defined. In Vue, environment variables must start with `VUE_APP_` so that Vue can recognize them correctly. For example:

 VUE_APP_API_BASE_URL=http://localhost:8080/api
 VUE_APP_DEBUG_MODE=true

 In the above example, we defined a variable named `VUE_APP_API_BASE_URL` with a value of `http://localhost:8080/api`, and a variable named `VUE_APP_DEBUG_MODE` with a value of `true`.

3. Use environment variables:
In Vue code, you can access the value of the environment variable by prefixing `process.env.VUE_APP_` with the variable name. For example, in a service file it could be used like this:

   

const baseUrl = process.env.VUE_APP_API_BASE_URL;
const debugMode = process.env.VUE_APP_DEBUG_MODE;

   In this way, we can use the two variables `baseUrl` and `debugMode` for development.

4. Start the project:

In the development environment, use the `npm run serve` command to start the project, and Vue will automatically load the environment variables in the `.env` file. In the production environment, Vue will automatically load the environment variables in the `.env.production` file.

In the Vue project, you can execute the corresponding environment variable when starting the project by configuring different environment variable files.

• Create an environment variable file :
• In the root directory of your Vue project, create the following files:
• - `.env`: default environment variable file
• - `.env.development`: environment variable file for development environment
• - `.env.production`: Environment variable file for production environment
• Configure environment variables:
• In different environment variable files, define the corresponding environment variables. For example, variables for the development environment can be defined in the `.env.development` file, and variables for the production environment can be defined in the `.env.production` file.
• Example:
• - `.env.development`

• VUE_APP_API_BASE_URL=http://localhost:8080/api
  VUE_APP_DEBUG_MODE=true

• - `.env.production`

• VUE_APP_API_BASE_URL=http://production.example.com/api
  VUE_APP_DEBUG_MODE=false

• Modify the script in `package.json`:
• In the `scripts` field in the `package.json` file, modify the `serve` script as follows:
• Add --mode development in the background of vue-cli-service serve (--mode + corresponding .env configuration file name)

• 
  "scripts": {
    "serve": "vue-cli-service serve --mode development"
  }
  

• This way, the environment variables in the `.env.development` file will be used when starting the development environment.
• Startup project:
• When starting the project by executing the `npm run serve` command, Vue will automatically load the configuration in the corresponding environment variable file.
• For example, after executing the `npm run serve` command, the environment variables in the `.env.development` file will be used in the development environment, and the environment variables in the `.env.production` file will be used in the production environment.
• By configuring different environment variable files, we can use different configurations in different environments, which makes it easy to manage project configuration and deployment.

Through Vue's environment variable configuration, we can use different configurations according to different environments, thereby improving the flexibility and maintainability of the project.

For example, use a local API server in the development environment and use an online API server in the production environment. This makes it easy to switch between different configurations without manually modifying the code.