Vue CLI environment variables and patterns

You can specify environment variables by replacing the following files in the root of your project:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

An environment file contains only the "key-value" pair of environment variables:

FOO=bar
VUE_APP_SECRET=secret

The loaded variable will be available for all commands, plug-ins, and dependencies of vue-cli-service.

The environment loads the property

Environment files prepared for a specific pattern (e.g. .env.production) will have a higher priority than general environment files (e.g., .env).

In addition, environment variables that already exist at the time of Vue CLI startup have the highest priority and are not overstritten by the .env file.

NODE_ENV

If you have a default NODE_ENV in your environment, you should remove it or explicitly set the vue-cli-service command NODE_ENV.

Mode

Patterns are an important concept in the Vue CLI project. By default, a Vue CLI project has three modes:

• Development mode is used for vue-cli-service serve
• Production mode is used for vue-cli-service build and vue-cli-service:e2e
• The test mode is used for vue-cli-service test:unit

Note that a pattern NODE_ENV different from the other, a pattern can contain multiple environment variables. That is, each pattern sets the value of NODE_ENV to the name of the pattern -- for example, in development mode, the value of NODE_ENV is set to "development".

You can set environment variables that are specific to a pattern by adding a suffix to the .env file. For example, if you create a file called .env.development at the root of the project, the variables declared in that file will only be loaded in development mode.

You can override the default mode on the command line by passing the --mode option parameter. For example, if you want to use development environment variables in build commands, add them to your package.json script:

"dev-build": "vue-cli-service build --mode development",

Example: Staging mode

Suppose we have an app that contains the following .env files:

VUE_APP_TITLE=My App

and .env.staging file:

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

• The vue-cli-service build loads possible .env, .env.production, and .env.production.local files and then builds the production environment application;
• The vue-cli-service build--mode staging loads possible .env, .env.staging, and .env.staging.local files in staging mode and then builds the production environment application.

In both cases, the NODE_ENV built is a production application based on NODE_ENV, but in the staging version, process.env.VUE_APP_TITLE is overstritten as another value.

Use environment variables in client-side code

Only variables that VUE_APP_ with a webpack will be webpacked. D efinePlugin is statically embedded in the package on the client side. You can access them like this in your app's code:

console.log(process.env.VUE_APP_SECRET)

During the build process, process.env.VUE_APP_SECRET will be replaced by the corresponding values. It VUE_APP_SECRET replaced with "secret" in the case of the "secret".

In addition VUE_APP_ variable, there are two special variables that are always available in your app code:

• NODE_ENV - will be one of "development," "production," or "test." The value depends on the mode in which your app runs.
• BASE_URL - will match the publicPath option .js vue.config, which is the underlying path that your app will deploy to.

All parsed environment variables can be public/index.html described in HTML Interpolation in the public/index.html.

Tips

You can calculate environment variables in .js vue.config file. T hey still need to start with VUE_APP_ prefix of the file. This can be used for version information process.env.VUE_APP_VERSION ./package.json').

Variables that are valid locally only

Sometimes you may have variables that you shouldn't commit to a code repository, especially if your project is hosted in a public repository. I n this case you should use a .env.local file instead. The local environment file is ignored by default and appears in .gitignore.

.local can also be added to environment files in a specified mode, such as .env.development.local, which will be loaded in development mode and ignored by git.