如何覆盖 Vue-cli3 中的环境变量？答案

【问题标题】：How to overwrite environment variables in Vue-cli3?如何覆盖 Vue-cli3 中的环境变量？
【发布时间】：2019-03-31 02:28:42
【问题描述】：

假设我们有一个使用 Vue-cli3 和 package.json 构建的 Vue.js 项目：

{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", ... }

此外，我们计划将我们的项目推送到 GitHub 上的公共存储库，因此我们需要不同的环境变量用于公共存储库和本地开发。 Vue-cli 3 给了我们modes:https://cli.vuejs.org/guide/mode-and-env.html#modes

我有这样一个文件：

.env
.env.development
.env.production
.env.local
.env.development.local
.env.production.local

.env 的内容：

NODE_ENV=production VUE_APP_PATH=http://website.com/ VUE_APP_API_ROUTE=api/v1/

.env.development 的内容：

NODE_ENV=development VUE_APP_PATH=http://dev-website.com/

.env.development.local 的内容：

NODE_ENV=development VUE_APP_PATH=http://localhost:8080/

当我执行npm run serve 时，我希望process.env.VUE_APP_PATH 将等于http://localhost:8080/，但不幸的是它仍然是=http://dev-website.com/。所以，问题是本地 env 文件（即 .env.development.local）中的变量不会被另一个 env 文件（即 .env.development）覆盖。

如何使用这种 vue-cli 方法来覆盖必要的变量？文档讲述了优先级：An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env).，但对于 .local 文件，它不起作用。

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案1】：

您可以在 npm 脚本中传入 --mode 选项。因此，在您的实例中，您可能希望 serve 脚本看起来像：

vue-cli-service serve --mode development.local

如果您想测试为您的非本地开发配置提供服务，您可以复制serve 脚本并将其重命名为serve:local，然后将原始serve 脚本编辑为如下所示：

vue-cli-service serve --mode development

这实际上是 CLI 3 开箱即用 serve 的实际默认模式。我们刚刚明确设置了模式。

【讨论】：