我们如何将参数传递给已经构建的 Vue JS 应用程序？

Question

我们有一个 Vue 应用程序，它连接到一个 Web 服务并获取一些数据。Web 服务 URL 不同，具体取决于我们安装应用程序的位置。

我首先想到使用.env文件，但后来我意识到这些文件被注入到缩小的.js文件中。

在文件main.js的情况下，在我的中有这个非常方便.env：

Vue.prototype.ApiBaseUrl = process.env.VUE_APP_APIBASEURL
Vue.prototype.PrintDocsFolder = process.env.VUE_APP_PRINTDOCSFOLDER
Vue.prototype.TicketPrintWSocket = process.env.VUE_APP_TICKETPRINTWSOCKET   

该应用程序已经构建。我不想为我们必须部署到的一百个位置中的每一个构建应用程序。我不确定对此的“官方”方法。

Vue 中是否有任何开箱即用的解决方案可以允许这种配置？基本上我们需要在构建的应用程序的根文件夹中有一个文件，并读取我们的值Vue.prototype.VARIABLES.

我们正在使用vue-cli3。

Answer 1

如果实际上有100 个位置，除了应用程序正常运行所需的变量之外，每个位置都应该使用不同的 API/参数来部署AND YOU DON'T WANT TO LEAVE ANY TRACE OF THE WHOLE DATA应用程序，那么我会亲自将所有不同的参数存储在一个中央数据库中并创建一个通用 API，它能够决定将哪些参数提供给哪个特定部署。因此，在初始应用程序加载时，应用程序将just have to make 1 extra API to call to get the correct params. （假设每个部署都有一些唯一的标识符）。

例如，如果唯一标识符是提供应用程序的域名。您可以将这样的参数存储在数据库中：

+-------------------+----------------------------+-----------------+--------------------+--+
| domainName        | ApiBaseUrl                 | PrintDocsFolder | TicketPrintWSocket |  |
+-------------------+----------------------------+-----------------+--------------------+--+
| example.com       | http://api-base-url-1.com/ | print-doc-1     | ticket-print-1     |  |
+-------------------+----------------------------+-----------------+--------------------+--+
| secondExample.com | http://api-base-url-2.com/ | print-doc-2     | ticket-print-2     |  |
+-------------------+----------------------------+-----------------+--------------------+--+
| thirdExample.com  | http://api-base-url-3.com/ | print-doc-3     | ticket-print-3     |  |
+-------------------+----------------------------+-----------------+--------------------+--+

然后在应用程序加载时，您可以进行 axios（基于 Promise 的 HTTP 客户端）调用并将其current domain name作为参数传递，如下所示：

const details = await axios.get('/common-api-with-all-the-details', {
params: {
    domainName: location.hostname
});

这个通用 API 应该将域与数据库相匹配，并相应地获取正确的记录。

优点：

• 您永远不需要重建应用程序或单独配置环境变量。
• 您将始终控制将哪些参数提供给哪个特定部署。
• 您可以即时更改/更新参数。
• 您的整个数据存储不是公开的。

缺点：

• 需要一台额外的服务器设置。
• 应用程序初始加载时进行 1 次额外的 API 调用。

其他方法：

• 您可以通过将所有详细信息存储在数组中来避免使用数据库（如果您的数据集不是太大）。然后，在每个COMMON API调用中，您可以将域名与数组进行匹配（lodash可以提供帮助），从而增加响应时间、降低复杂性并完全避免数据库设置。

• 您可以使用无服务器架构来避免设置全新的服务器来托管您的COMMON API，Firebase 云函数或 AWS Lambda 具有慷慨的免费套餐来覆盖相当多的流量。