Динамически изменять маршрут API для SPA

Question

В настоящее время я создаю приложение SPA, используя Vue.js и веб-пакет для выполнения нашего пакета.Внутренний API построен на основе .Net Core.При локальном запуске приложение Vue загружает localhost на серверную часть.Мне нужно иметь возможность динамически изменять маршрут API в зависимости от среды.Есть ли способ сделать это без необходимости делать большой оператор switch, который учитывает текущий URL?Требование заключается в том, что нам не разрешается изменять пакет веб-пакета для других сред, иными словами, после его объединения он должен оставаться в комплекте.Я попытался передать статические файлы конфигурации в пакет и динамически изменить их в зависимости от среды, но, к сожалению, это не работает, так как оно достигает значений, которые были в них изначально.

Answer 1

webpack dev server имеет возможность прокси.Вы можете использовать это для прокси для вашего локально работающего бэкэнда при разработке.

https://webpack.js.org/configuration/dev-server/#devserver-proxy

например, вы можете указать что-нибудь от '/ api' до 'localhost: 8888 / api' с помощью конфигурации.

Является ли ваше приложение серверным, запущенным по тому же URL-адресу при развертывании?В противном случае вам, вероятно, понадобится обратный прокси-сервер для передачи запросов к бэкэнду.

Вы можете использовать перехватчик axios, поэтому у вас есть только один переключатель:

axios.interceptors.request.use(config => {
    // check location.host name and append the backend url you want
  });

см. https://github.com/axios/axios#interceptors

Однако это немного опасно, поскольку URL-адреса в вашем операторе switch будут строками, и поэтому все URL-адреса вашей среды могут быть извлечены из вашего кода, даже если они минимизированы / объединены.

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