Как во VueJS организовать deployment variables?

Question

[Александр Урих]

Есть приложение, которое по api работает с бэкендом. При разработке адрес бэкенда один, а на продакшене - другой.
Как сделать что-то типа файла-конфига, который не будет в гите, в которм можно будет указать для каждого приложения свои данные?
Я полез в папку config, там есть файлы dev.env.js и prod.env.js. Прописал там:

module.exports = {
  NODE_ENV: '"production"',
  API_URL: 'http://mysite.ru'
}

Соответственно для dev прописал один урл, а для prod - другой.
Получить пытаюсь так:
process.env.API_URL
Но ошибка - process не найден
Тогда я импортирую его
import process from 'process'
Ок, ошибки нет. Но в результате там пусто, пустая строка.
Прописал в конфиге prod, так вообще собираться не хочет с ошибкой

ERROR in chunk app [initial]
static/js/[name].[chunkhash].js
Unexpected token (16:71)

Подскажите, знатоки, как правильно это организовать

Comments

[Алексей Ярков]

Вы бы ссылку на репозиторий дали. А то получается у остальных работает, а у вас нет. И как гадать?

[Александр Урих]

Алексей Ярков, Да, все работает. Глянул свежим взглядом, в dev.env.js указано NODE_ENV: '"development"', то есть одинарные и двойные кавычки. Сделал так же - заработало

Answer 1

[Златослав Десятников]

Возьмите пакет dotenv.

В файле .env описываете переменные окружения.
Сделайте файлик src/config.js.

Это модуль, который возвращает объект с настройками, по структуре такой же, как и dev.env.js.

Чтобы параметры приложения были доступны отовсюду, можно оформить это как плагин Vue.

Comments

[Александр Урих]

Ваш вариант тоже отличный, на основе его придумал кое что. А конфигурацию все таки завел через env

[Златослав Десятников]

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