Как организовать файл дефолтных настроек для своего Vue приложения?

Question

[Дмитрий]

Требуется в продакшен версии (в папке dist, компилится стандартным vue-cli) иметь файл с настройками, которые пользователь может легко поменять и все приложение будет работать с новыми настройками.

Например, я пробовал создать файл settings.js в папке public:

export const settings = {
  vizEngineIp: '127.0.0.1:61000',
  jsonServerIp: '127.0.0.1:3000',
}

И импортирую его в основном Vue компоненте:
import { settings } from '../public/settings.js'

Но таким образом все настройки оказываются запеченными в выходной js.

Как лучше организовать статичный js файл (или json), который не будет запечен в код приложения, а останется независимым и удобным для редактирования?

Answer 1

[Сергей delphinpro]

В папке public размещайте json файл. Чистый json с настройками, безо всяких экспортов.
Приложение при загрузке первой страницы (например в хуке created компонента App) загружает этото файл и применяет из него настройки.

Comments

[Дмитрий]

Спасибо, попробую!

[Дмитрий]

Попробовал так:


Может я что-то не правильно сделал, но в результате данные все равно запекаются в выходном js.

[Сергей delphinpro]

Дмитрий,
Аяксом подгружайте файл.

async created(){
  let config = await fetch('defaults.json');
  console.log(config)
}

[Сергей delphinpro]

конечно, для этого приложение должно выполняться под каким-либо сервером. надо что-то поднять локально.

[Сергей delphinpro]

И предупреждая ваш следующий возможный вопрос:
по-другому никак. Собранное приложение само по себе. внешний файл отдельно. И получить его можно только аяксом.

[Дмитрий]

Сергей delphinpro, спасибо! Так работает! Теперь придется переделывать все приложение под асинхронную загрузку. :)

Конечно, сервер имеется. Я использую существующую инфрастуктуру, там уже есть простенький web-сервер.

На счет другого варианта, мне еще предложили (соседний ответ) что можно попытаться отдельным чанком. Но мне больше нравится ваш вариант.

[Сергей delphinpro]

Дмитрий, чанк будет неудобно редактировать без пересборки проекта.

Answer 2

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

Писать ваши настройки в глобальную переменную и при сборке вынести ваши настройки отдельным чанком и подключить перед скриптом приложения.
Тогда можно будет на лету подхватить изменения.

Comments

[Дмитрий]

Спасибо! Тоже вариант, если не получится с json-ом то попробую так! Наверное тут вполне оправдано использовать глобальные переменные.

Answer 3

[Дмитрий]

Никак. Либо используйте бакэнд, либо храните настройки в localstorage

Comments

[Дмитрий]

Увы, оба варианты недопустимы из-за схемы использования этого приложения. Нельзя иметь бэкенд чтобы ничего не устанавливать нового. А доступа к интернету нет и не будет. И нельзя хранить в localstorage потому что этим приложениям пользуются сразу несколько клиентов по сети, и неизвестно заранее какие именно. При этом надо иметь общие актуальные настройки на всех клиентах.