Недавно я использовал стратегию шаблонов конфигурации для Vue, и мне она нравится, потому что она упрощает процесс настройки для каждого развертывания и не требует дополнительной конфигурации сборки поверх того, что выходит из коробки из проекта vue-cli create.
Шаг 1. Добавьте .env.{development/production}
Создайте два новых файла в корневом каталоге вашего приложения vue:
.env.development— переменные среды, которые будут доступны во время сборки для сборок разработки (например,npm run serve).env.production— Поразительно, но переменные, которые будут доступны во время сборки для производственных сборок (например,npm run build)
Шаг 2: Добавьте свою пользовательскую конфигурацию в .env.development
Эти файлы имеют формат dotenv. Пользовательские переменные среды распознаются процессом сборки vue по умолчанию, только если они имеют префикс VUE_APP_
Шаг 3. Обновите файл index.html.
Взгляните на свой /public/index.html . Вы заметите, что в форме <%= BASE_URL %> уже используется подстановка переменных. Мы собираемся использовать это существующее поведение, чтобы поместить наши пользовательские переменные в контекст Vue.
Обновите свой /public/index.html следующим встроенным скриптом (строка 12)
Теперь вы сможете нажимать window.$app.config в любом месте вашего приложения Vue, и вы получите правильную конфигурацию (вам, вероятно, следует обернуть доступ к этому в отдельный компонент).
Шаг 4: Добавьте свою пользовательскую конфигурацию в .env.production
Этот последний шаг полностью зависит от вашего конвейера развертывания и того, как вы выполняете подстановку переменных.
Это шаг подстановки переменных, с которым я работаю в Azure devops. В частности, переменные заменяются, когда они соответствуют форме #{name} Итак, учитывая это, мои переменные окружения .env.production выглядят так:
В результате, когда производственная сборка запускается для моего приложения Vue, переменные в /public/index.html заменяются вторым уровнем строк шаблона, которые впоследствии готовы к замене при развертывании.
Шаг 5: Дайте мне знать, если вы придумаете что-то лучше
Это то, над чем я работаю прямо сейчас, но может быть что-то лучше или простые улучшения, которые я пропустил. Не могли бы вы прокомментировать ниже, если вы найдете что-нибудь. Спасибо :)