【发布时间】：2021-03-10 10:12:27
【问题描述】：
我正在开发一个在多个地方使用环境变量的 VueJS 应用程序。它在 GCloud 上运行，nginx 为使用vue-cli-service build 编译的文件提供服务。
在开发时，一切都适用于在 .env.development 和 .env.development.local 文件中设置的环境变量，并在 JS 中使用 process.env.VUE_APP_FOO。我没有使用.env.production，因为其中一些环境变量不应该提交到我们的存储库。
对于我们所有项目的 staging 和 prod 环境，我们使用 GCloud 的配置映射，它允许我们为 pod 提供环境变量。这个项目中的问题是vue-cli-service build 要求环境变量在构建时可用，而我们的设置中并非如此。配置映射仅在运行映像的 pod 中可用。
出于好奇，我检查了编译后的代码，process.env 的所有用法都被一个带有所有 vue 环境变量的对象（基本的 + VUE_APP_* 的）简单地替换了。比如，
console.log(process.env.VUE_APP_FOO);
编译成
console.log(Object({NODE_ENV: "production", BASE_URL: "/", VUE_APP_FOO: "bar"}).VUE_APP_FOO);
除了在我们的例子中，VUE_APP_FOO 从对象中丢失，因为在构建应用程序时它在环境中不可用。
因此，在启动服务器或提供 JS 文件时似乎无法提供环境变量。有没有办法告诉vue-cli-service 不要那样编译环境？还是有其他选择？
目前我发现的唯一一种方法是，当 pod 开始使用 sed 时，直接在编译的 JS 文件中将 env vars 的使用替换为其实际值，但这非常难看，而且很容易损坏。
【问题讨论】：
-
是的，docker 镜像是使用 Drone 构建的（编译后将 dist 文件复制到镜像中），然后推送到 GCloud。
-
是的，但是鉴于我们当前的设置，这将要求我们将环境存储在我们不想做的 repo 中。同样正如下面另一条评论中提到的，这会将“env vars”变成“build params”，这也有点破坏了我们的常规设置。更新 env var 应该只需要重新启动 pod，而不是完全重建。
-
"pod 重启如何更新引用 VUE_APP_FOO 的编译资源" => 我们还有其他项目引用 env vars（例如 Python 中的 os.getenv）。更改这些只需要使用更新的配置映射启动一个新容器，无需重建。即使在构建项目时，也可能会出现 URL 或 API 密钥中的拼写错误，如果我们必须进行完全重建而不是简单地重新启动 pod，那就更烦人了。
标签： vue.js environment-variables