VueJS SPA динамический baseURL для axios

Я искал и искал, но не могу найти для этого шаблона. Я бы считал себя промежуточным разработчиком Vue, однако бэкэнд - моя сильная сторона. Я работаю над приложением, которое будут отмечены торговыми посредниками. Хотя возможно иметь несколько сборок, было бы идеально избежать этого. Установка представляет собой автономный vue-cli SPA, подключающийся к серверной части Laravel api и использующий пакет авторизации Sanctum. Поэтому мне нужны звонки в тот же домен. Проблема: реселлеры будут в собственном домене. Вопрос: есть ли шаблон / решение для динамической загрузки конфигураций (в основном baseURL) для разных доменов (другие элементы будут по теме / таблице стилей). В настоящее время у меня есть несколько типичных записей:

т.е. axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL

В основном, в зависимости от домена, на котором обслуживается сайт, мне нужна динамическая конфигурация / конфигурация времени выполнения. Я чувствую, что это было решено, но я не могу использовать правильные поисковые запросы для какого-то направления, так что все полезно. Я пробовал несколько вещей:

1) Разбор в js, но не получается заставить его запустить достаточно рано в процессе, чтобы он вступил в силу? Вроде работает, но не получается "щелкнуть"

2) Выберите конечную точку общедоступного API с текущим доменом и получите конфигурацию. Опять же, можно реализовать, но не получается заставить его правильно вводить в сторону Vue?

Любые ресурсы, ссылки на шаблоны или общие рекомендации были бы весьма признательны, чтобы избежать поддержки нескольких сборок только для нескольких переменных. Тем не менее, я не думаю, что в этом есть много накладных расходов, но я также готов сказать, что я ошибаюсь и мне нужно несколько сборок.

Конечный результат

посещенный URL https://mydomaincom

тогда baseURL = https://api.mydomiancom

посещенный URL https://resellerdomaincom

тогда baseURL=https://api.resellerdomaincom

Источник

2 ответа

Я не думаю, что есть общий шаблон для решения вашей проблемы - я ничего не нашел в сети.

Лучшее решение для разработки программного обеспечения может быть следующим:

  • иметь единую серверную часть
  • распространять только клиента среди ваших клиентов / реселлеров

Очевидно, что серверная часть может видеть домен приложения, из которого приходит запрос, и соответствующим образом управлять логикой.

Удачи тебе с твоим проектом.

Источник

Честно говоря, мне не совсем понятно, как поставить вопрос. Хотя мой обычный шаблон таков:

Создайте экземпляр axios следующим образом:

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

а затем всякий раз, когда я делаю запрос к какому-либо api, я буду использовать этот экземпляр.

РЕДАКТИРОВАТЬ: В соответствии с вашим редактированием вы можете либо выпустить клиента для каждого клиента и иметь файл.env для каждого из них, либо у вас может быть система шлюза, в которой конечная точка клиентской axios всегда одинакова, нажимая всегда один и тот же сервер, а затем оттуда сервер решает, что пинговать, исходя из вашей собственной логики

Источник
Другие вопросы по тегам