Динамический базовый URL-адрес VueJS SPA для axios

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

i.e. 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


api vue.js laravel vue-cli laravel-sanctum
person HopeStreet    schedule 03.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

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

person lorenzo_campanile    schedule 03.05.2020

arrow_upward
0
arrow_downward

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

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

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

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

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

person Cristiano Soleti    schedule 03.05.2020
comment
Правильно, но вопрос в том, как сделать переменную process.env.VUE_APP_URL_YOU_WOULD_LIKE_TO_HIT во время выполнения. Это означает, что если посещенный URL-адрес mydomaincom, то baseURL = api.mydomiancom и если URL-адрес resellerdomaincom, то baseURL=api.resellerdomaincom — я отредактирую вопрос с такой ясностью - person HopeStreet; 03.05.2020
comment
Это не может быть во время выполнения. process.env.VUE_APP_etc — это замена строки, которая происходит во время сборки. Итак, если у вас 10 сайтов, у вас может быть 10 файлов .env с 10 разными конечными точками. - person Cristiano Soleti; 03.05.2020