mirror/vue-cli
1
0
Fork 0
mirror of https://github.com/vuejs/vue-cli.git synced 2026-04-24 05:50:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs: add warning on client side environment variables (#5243)

Browse Source 
Inspired by the create-react-app documentation
https://create-react-app.dev/docs/adding-custom-environment-variables
This commit is contained in:
Haoqun Jiang
2020-03-07 07:22:35 +08:00
committed by GitHub
parent d84c074eb9
commit d41f31c2f9
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/mode-and-env.md
+10 -4
View File
@@ -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+).
@@ -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: