May 07, 2021 Vue CLI
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.
Patterns are an important concept in the Vue CLI project. By default, a Vue CLI project has three modes:
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",
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)
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.
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:
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').
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.