Question

我正在使用Vue构建SPA并将其与nodejs一起提供并将其包装在docker容器中。这是问题所在，我正在努力坚持12 factor app配置它保存在env文件中。

VueJS为config文件夹中的不同环境提供配置。但是，根据12 factor app配置，不应该在基于环境的文件中。

在十二因子应用程序中，env vars是粒度控件，每个控件都与其他env变量完全正交。它们永远不会组合在一起作为“环境”，而是针对每个部署进行独立管理。

那么如何在VueJS app中访问nodejs环境变量？

修改：谢谢你的回答。整个想法是通过提供不同的env变量来改变运行时的api url。如果我使用api url提交配置文件，我将不得不在提交时重建容器并仅为这个小的更改进行部署。

我还可以使用api访问密钥，它与dev和prod不同。

我正在寻找在SPA中做这类事情的最佳方式。

Answer 1

如今的SPA应用程序通常会经历构建步骤。这意味着将所有文件编译为[near]一个dist文件和一个可以静态提供的index.html。这在前端（VueJS）和后端（NodeJS）之间创建了清晰的分离。尽管如此，index.html和js文件本身仍然是静态文件。

这通常是您想要的，因为您可以独立扩展服务器和客户端：例如，通过s3 + cdn提供静态文件并独立运行您的nodejs服务器。

我认为你想要的是一种将运行时配置传递给客户端的方法。我不会太了解实际分享envvars本身的细节。

在您的情况下，我看到两种可能的解决方案：

1）实施API以从您的服务器访问列入白名单的envvars - 您可以将其视为/ config端点

2）通过nodejs动态渲染index.html，其中包含ejs和预先填充的envvars - 您可以在前端和服务器之间进行更多耦合，但是您可以将其扩展到远远超过envvars，比方说，用预取数据预先填充前端。

无论您如何操作，都可以考虑前端的运行时配置，不应该在构建时尝试修复，因为否则您可能会将敏感数据暴露在静态文件中并不总能保证您目前拥有所有数据。

Answer 2

无论您使用哪种操作系统，访问env变量的方式都应该相同。你设置它们的方式虽然不同。在Windows上我会设置一个像这样的环境变量

set PASSWORD=somepassword

然后在代码中我可以通过执行以下操作来访问此变量

var pw = process.env.PASSWORD;

您应该能够在VueJS中以相同的方式使用它。

编辑：

如果您使用docker-compose，您也可以使用环境变量动态设置端点。然后，只要您docker-compose up端点将使用环境变量的当前值进行更新。在您的shell中，将api端点更新为您想要的任何内容。

set API_URL=http://my-api-endpoint

然后在docker-compose.yml中你可以像这样访问这个值

version: '3'
services:
  app:
    image: 'myapp'
    environment: 
    - API_URL=${API_URL}

您仍然可以使用我在上面示例中提到的process.env.API_URL来访问代码中的变量。