diff --git a/docs/guide/mode-and-env.md b/docs/guide/mode-and-env.md index a940fb6ff2..9f5ec8baf8 100644 --- a/docs/guide/mode-and-env.md +++ b/docs/guide/mode-and-env.md @@ -54,7 +54,14 @@ Environment variables are embedded into the build, meaning anyone can view them 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+). +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+). For example: + +``` bash +FOO=foo +BAR=bar + +CONCAT=$FOO$BAR # CONCAT=foobar +``` Loaded variables will become available to all `vue-cli-service` commands, plugins and dependencies. diff --git a/docs/zh/guide/mode-and-env.md b/docs/zh/guide/mode-and-env.md index d471467a82..14bc3df8ab 100644 --- a/docs/zh/guide/mode-and-env.md +++ b/docs/zh/guide/mode-and-env.md @@ -1,6 +1,36 @@ -# 环境变量和模式 +# 模式和环境变量 -你可以替换你的项目根目录中的下列文件来指定环境变量: +## 模式 + +**模式**是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式: + +- `development` 模式用于 `vue-cli-service serve` +- `test` 模式用于 `vue-cli-service test:unit` +- `production` 模式用于 `vue-cli-service build` 和 `vue-cli-service test:e2e` + +你可以通过传递 `--mode` 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量: + +``` +vue-cli-service build --mode development +``` + +当运行 `vue-cli-service` 命令时,所有的环境变量都从对应的[环境文件](#环境变量)中载入。如果文件内部不包含 `NODE_ENV` 变量,它的值将取决于模式,例如,在 `production` 模式下被设置为 `"production"`,在 `test` 模式下被设置为 `"test"`,默认则是 `"development"`。 + +`NODE_ENV` 将决定您的应用运行的模式,是开发,生产还是测试,因此也决定了创建哪种 webpack 配置。 + +例如通过将 `NODE_ENV` 设置为 `"test"`,Vue CLI 会创建一个优化过后的,并且旨在用于单元测试的 webpack 配置,它并不会处理图片以及一些对单元测试非必需的其他资源。 + +同理,`NODE_ENV=development` 创建一个 webpack 配置,该配置启用热更新,不会对资源进行 hash 也不会打出 vendor bundles,目的是为了在开发的时候能够快速重新构建。 + +当你运行 `vue-cli-service build` 命令时,无论你要部署到哪个环境,应该始终把 `NODE_ENV` 设置为 `"production"` 来获取可用于部署的应用程序。 + +::: warning NODE_ENV +如果在环境中有默认的 `NODE_ENV`,你应该移除它或在运行 `vue-cli-service` 命令的时候明确地设置 `NODE_ENV`。 +::: + +## 环境变量 + +你可以在你的项目根目录中放置下列文件来指定环境变量: ``` bash .env # 在所有的环境中被载入 @@ -13,39 +43,36 @@ ``` FOO=bar -VUE_APP_SECRET=secret +VUE_APP_NOT_SECRET_CODE=some_value ``` -被载入的变量将会对 `vue-cli-service` 的所有命令、插件和依赖可用。 - -::: tip 环境加载属性 - -为一个特定模式准备的环境文件 (例如 `.env.production`) 将会比一般的环境文件 (例如 `.env`) 拥有更高的优先级。 +::: warning 警告 +不要在你的应用程序中存储任何机密信息(例如私有 API 密钥)! -此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 `.env` 文件覆写。 +环境变量会随着构建打包嵌入到输出代码,意味着任何人都有机会能够看到它。 ::: -::: warning NODE_ENV -如果在环境中有默认的 `NODE_ENV`,你应该移除它或在运行 `vue-cli-service` 命令的时候明确地设置 `NODE_ENV`。 -::: +请注意,只有 `NODE_ENV`,`BASE_URL` 和以 `VUE_APP_` 开头的变量将通过 `webpack.DefinePlugin` 静态地嵌入到*客户端侧*的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。 -## 模式 +想要了解解析环境文件规则的细节,请参考 [dotenv](https://github.com/motdotla/dotenv#rules)。我们也使用 [dotenv-expand](https://github.com/motdotla/dotenv-expand) 来实现变量扩展 (Vue CLI 3.5+ 支持)。例如: -**模式**是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式: +``` bash +FOO=foo +BAR=bar -- `development` 模式用于 `vue-cli-service serve` -- `production` 模式用于 `vue-cli-service build` 和 `vue-cli-service test:e2e` -- `test` 模式用于 `vue-cli-service test:unit` +CONCAT=$FOO$BAR # CONCAT=foobar +``` -注意模式不同于 `NODE_ENV`,一个模式可以包含多个环境变量。也就是说,每个模式都会将 `NODE_ENV` 的值设置为模式的名称——比如在 development 模式下 `NODE_ENV` 的值会被设置为 `"development"`。 +被载入的变量将会对 `vue-cli-service` 的所有命令、插件和依赖可用。 -你可以通过为 `.env` 文件增加后缀来设置某个模式下特有的环境变量。比如,如果你在项目根目录创建一个名为 `.env.development` 的文件,那么在这个文件里声明过的变量就只会在 development 模式下被载入。 +::: tip 环境文件加载优先级 -你可以通过传递 `--mode` 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 `package.json` 脚本中加入: +为一个特定模式准备的环境文件 (例如 `.env.production`) 将会比一般的环境文件 (例如 `.env`) 拥有更高的优先级。 -``` -"dev-build": "vue-cli-service build --mode development", -``` +此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 `.env` 文件覆写。 + +`.env` 环境文件是通过运行 `vue-cli-service` 命令载入的,因此环境文件发生变化,你需要重启服务。 +::: ## 示例:Staging 模式 @@ -62,7 +89,7 @@ NODE_ENV=production VUE_APP_TITLE=My App (staging) ``` -- `vue-cli-service build` 会加载可能存在的 `.env`、`.env.production` 和 `.env.production.local` 文件然后构建出生产环境应用; +- `vue-cli-service build` 会加载可能存在的 `.env`、`.env.production` 和 `.env.production.local` 文件然后构建出生产环境应用。 - `vue-cli-service build --mode staging` 会在 staging 模式下加载可能存在的 `.env`、`.env.staging` 和 `.env.staging.local` 文件然后构建出生产环境应用。