From e4f0a22eba205be4c28c20e7792a1df98c62348c Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 5 Mar 2020 17:09:14 +0800 Subject: [PATCH] docs: add warning on client side environment variables Inspired by the create-react-app documentation https://create-react-app.dev/docs/adding-custom-environment-variables --- docs/guide/mode-and-env.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/guide/mode-and-env.md b/docs/guide/mode-and-env.md index 39b93d7af6..a940fb6ff2 100644 --- a/docs/guide/mode-and-env.md +++ b/docs/guide/mode-and-env.md @@ -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: