VueJs 环境变量优先级答案

【问题标题】：VueJs Environment Variables PriorityVueJs 环境变量优先级
【发布时间】：2021-08-30 08:32:19
【问题描述】：

我有一个 VueJS 应用程序，它使用此处记录的不同环境文件： https://cli.vuejs.org/guide/mode-and-env.html#

我有 2 个文件：

.env.development

我希望在远程开发服务器中运行应用程序时使用此文件。它包含以下内容。

VUE_APP_K8S=true
VUE_APP_MATOMO_SITE_ID=0

.env.development.local

我希望当应用程序在本地开发环境中运行时使用此文件。它包含以下内容。

VUE_APP_K8S=false
VUE_APP_MATOMO_SITE_ID=0
VUE_APP_GRAPHQL_PORT=5433

我想知道.env.development.local文件在远程开发服务器运行时是否会优先使用？还是会被忽略？

【问题讨论】：

【解决方案1】：

如果您查看文档中的示例，您会发现这两个文件都依赖于模式，因此如果您运行以下命令：

vue-cli-service build --mode development

它将使用.env.development，如果你运行：

vue-cli-service serve --mode development

它应该使用.env.development.local

但您也可以使用.env.local，当您在本地运行时始终会加载它，即使没有定义模式。

总结一下：

在远程开发上，运行命令：vue-cli-service build --mode development 和 .env.development 将被加载
在本地环境中，运行：vue-cli-service serve --mode development 或将.env.development.local 更改为.env.local

【讨论】：

【解决方案2】：

local ENV 文件不应提交到 repo。唯一使它们成为本地的事实是，默认的.gitignore 文件被设置为忽略它们。如果您将它们提交到 repo，它将被加载到您的远程开发服务器上（优先于.env.development）

【讨论】：