Vue CliThere are three models for the project

  • development: Development mode, selected by default, forvue-cli-service serve
  • test: Test mode, forvue-cli-sercive test:unit
  • production: Production mode, forvue-cli-service build 和 vue-cli-service test:e2e

We can override the default mode for the command line by passing the –mode option argument.

vue-cli-service build --mode development
// or
vue-cli-service build --mode production
Copy the code

The environment variable

We can specify environment variables by placing the following files in the project root directory:

Env.[mode] # is loaded only in the specified mode. Git ignores itCopy the code

Environment file load priority Environment files prepared for a particular schema (e.g..env.production) will have higher priority than normal environment files (e.g..env). In addition, environment variables that already exist when Vue CLI is started have the highest priority and are not overwritten by.env files. The. Env environment file is loaded by running vue-cli-service, so if the environment file changes, you need to restart the service.

1. Define environment variables

Define variables in environment files using key-value pairs

VUE_APP_TEST = 'Hello World!!! 'Copy the code

Note: Only NODE_ENV, BASE_URL and variables starting with VUE_APP_ will be statically embedded in the client-side code via webpack.defineplugin. This is to avoid accidentally exposing a private key on the machine that might have the same name.

2. Use environment variables

Obtain the environment variables of the corresponding environment by using proess.env.

console.log('process.env',process.env)
console.log('process.env.NODE_ENV',process.env.NODE_ENV)
console.log('process.env.TEST',process.env.VUE_APP_TEST)
Copy the code

You can also modify environment variables in vue.config.js

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {

}
Copy the code