axios 的 VueJS SPA 动态 baseURL答案

【问题标题】：VueJS SPA dynamic baseURL for axiosaxios 的 VueJS SPA 动态 baseURL
【发布时间】：2020-08-17 21:30:51
【问题描述】：

我已经搜索和搜索，似乎无法找到这种模式。我认为自己是中级 Vue 开发人员，但是，后端是我的强项。我正在开发一款将被经销商贴上白标签的应用程序。虽然可以有多个构建，但最好避免这种情况。该设置是一个独立的 vue-cli SPA，连接到 Laravel api 后端并使用 Sanctum auth 包。所以我需要调用同一个域。问题：经销商将在他们自己的域上。问：是否有一种模式/解决方案可以为不同的域（其他项目将通过主题/样式表）动态加载配置（主要是 baseURL）。目前我有几个典型的条目：

即axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL

基本上，根据网站所服务的域，我想要一个动态/运行时配置。我觉得这已经解决了，但我似乎无法在某些方向上使用正确的搜索词，所以任何事情都有帮助。我尝试了一些方法：

1）在js中解析，但似乎无法让它在过程中足够早地运行以生效？它似乎有效，但我无法让它“点击”

2) 使用当前域访问公共 API 端点并获取配置。再次，可以实现，但似乎无法将其正确注入到 Vue 端？

任何资源、模式参考或一般指导都将非常感激，以避免仅仅为几个变量维护多个构建。也就是说，我不认为这有太多开销，但也可以告诉我我错了，需要多个构建。

最终结果

访问的网址是https://mydomaincom

然后baseURL = https://api.mydomiancom

访问过的网址https://resellerdomaincom

然后baseURL=https://api.resellerdomaincom

【问题讨论】：

标签： laravel api vue.js vue-cli laravel-sanctum

【解决方案1】：

老实说，这个问题是如何提出的，这对我来说并不是很清楚。虽然我通常的模式是：

像这样创建一个 axios 实例：

export const axiosInstance = axios.create({
  // ...configs
  baseURL: process.env.VUE_APP_URL_YOU_WOULD_LIKE_TO_HIT
})

然后每当我向某个 api 发出请求时，我都会使用这个实例。

编辑：根据您的编辑，您可以将客户端发布给每个客户，并为每个客户拥有一个 .env 文件，或者您可以拥有一个网关系统，其中客户端 axios 端点始终是相同，总是访问同一个服务器，然后服务器根据您自己的逻辑从那里决定要 ping 什么

【讨论】：

正确，但问题是如何在运行时使process.env.VUE_APP_URL_YOU_WOULD_LIKE_TO_HIT 变量。意思是如果访问的 url 是 mydomaincom 那么 baseURL = api.mydomiancom 并且如果 url 是 resellerdomaincom 那么 baseURL=api.resellerdomaincom - 我会清楚地编辑问题
它不能在运行时。 process.env.VUE_APP_etc 是在构建时发生的字符串替换。因此，如果您有 10 个站点，则可以有 10 个具有 10 个不同端点的 .env 文件。

【解决方案2】：

我认为没有解决您问题的通用模式 - 我在网上没有找到任何东西。

最好的软件设计解决方案如下：

只有一个后端
仅将客户分发给您的客户/经销商

显然后端可以看到请求来自的应用程序的域并相应地管理逻辑。

祝你的项目好运。

【讨论】：