Независимые от среды сборки с использованием шаблона веб-пакета Vue

Question

Я использую сервер сборки для создания моих проектов Vue, используя команду , красиво поставляемую шаблоном Vue 2. Шаблон Vue также предоставляет возможность доступа к данным, зависящим от среды, которые могут быть настроены в файлах под каталогом config. Такие вещи, как prod.env.js и т. Д. Затем вы получаете доступ к этим данным через process.env.API_PREFIX, как видно из руководства по шаблону.

Я хочу, чтобы иметь возможность построить код один раз, затем развернуть ту же сборку (как определено выходом в Dist) на несколько серверов, но разные серверы используют другую конфигурацию (разные API_PREFIX и т. Д.). В настоящее время ссылки process.env расширяются во время сборки компилятором Webpack. Поэтому я должен перестраиваться для каждой среды.

Я могу придумать несколько способов сделать это - очевидно, что загрузка конфигурации должна произойти во время выполнения, и, учитывая, что она запускается в браузере и должна ссылаться на какой-то файл, она должна быть выполнена запрос AJAX для некоторой статической конфигурации JSON, обслуживаемой веб-сервером отдельно или аналогичным. Но мне было бы интересно узнать, как кто-то здесь справится с этим требованием.

Answer 1

Не зная вашей конкретной архитектуры, сложно дать конкретные советы. Вместо этого я оставлю несколько общих идей.

Чтобы сделать то, что вы хотите разумным способом, вам, вероятно, придется получить префикс из домена, в котором вы обслуживаете интерфейс.

Есть несколько вещей, которые вы можете использовать для этого, помимо использования window.location во время выполнения:

• относительные пути /api/myinformation - префикс будет автоматически выводятся из области, где оболочка подается в.
• Локальный прокси во время разработки, так как вы не можете запустить бэкенд на локальном хосте https://github.com/vuejs-templates/webpack/blob/master/docs/proxy.md
• Proxy переписывают путь на Nginx или аналогичный: https://stackoverflow.com/a/3017720/1445812

Даже если это не поможет решить конкретный случай, надежда это дает вам представление о том, что доступно.