Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add warning on client side environment variables #5243

Merged
merged 1 commit into from Mar 6, 2020
Merged

docs: add warning on client side environment variables #5243

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 10 additions & 4 deletions docs/guide/mode-and-env.md
View file
Open in desktop
Expand Up @@ -43,10 +43,16 @@ An env file simply contains key=value pairs of environment variables:

```
FOO=bar
VUE_APP_SECRET=secret
VUE_APP_NOT_SECRET_CODE=some_value
```

Note that only variables that start with `VUE_APP_` will be statically embedded into the client bundle with `webpack.DefinePlugin`.
::: warning
Do not store any secrets (such as private API keys) in your app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
:::

Note that only `NODE_ENV`, `BASE_URL`, and variables that start with `VUE_APP_` will be statically embedded into the *client bundle* with `webpack.DefinePlugin`. It is to avoid accidentally exposing a private key on the machine that could have the same name.

For more detailed env parsing rules, please refer to [the documentation of `dotenv`](https://github.com/motdotla/dotenv#rules). We also use [dotenv-expand](https://github.com/motdotla/dotenv-expand) for variable expansion (available in Vue CLI 3.5+).

Expand Down Expand Up @@ -87,10 +93,10 @@ In both cases, the app is built as a production app because of the `NODE_ENV`, b
You can access env variables in your application code:

``` js
console.log(process.env.VUE_APP_SECRET)
console.log(process.env.VUE_APP_NOT_SECRET_CODE)
```

During build, `process.env.VUE_APP_SECRET` will be replaced by the corresponding value. In the case of `VUE_APP_SECRET=secret`, it will be replaced by `"secret"`.
During build, `process.env.VUE_APP_NOT_SECRET_CODE` will be replaced by the corresponding value. In the case of `VUE_APP_NOT_SECRET_CODE=some_value`, it will be replaced by `"some_value"`.

In addition to `VUE_APP_*` variables, there are also two special variables that will always be available in your app code:

Expand Down