У меня есть работающее приложение vue-cli, которое я могу создать без проблем. Теперь я хочу упаковать одну сборку, которая будет развернута на нескольких серверах. Моя проблема в том, что в зависимости от сервера мне придется настроить некоторые простые переменные (порт сервера, токен API и т. д.).
Очевидно, что запускать несколько сборок (на основе файлов .env или чего-то еще) неподходящее решение из-за контекста. Я часто получаю информацию о настройках на месте, и мне приходится быстро их настраивать.
Прежде чем работать с Webpack и всем его базовым процессом компиляции, у меня был классический файл js со встроенными настройками, и я хотел создать что-то подобное. Насколько я знаю, файлы, созданные в папке public
, недоступны из компонентов vue (с директивой импорта), и после минимизации это не решение для настройки параметров.
Можно ли указать vue-cli3 или webpack сохранить определенный файл или папку «как есть»? Или, может быть, есть более чистое решение?
После краткого обзора ваше решение звучит намного чище, чем мое, и более «совместимо с DevOps»! Спасибо
Ну, на всякий случай, если кому-то когда-нибудь понадобится сделать что-то подобное, вот мое решение:
settings.json
В компоненте App.vue я указываю метод mounted()
, который будет автоматически вызываться при запуске компонента (при необходимости см. Жизненный цикл компонентов VueJs). Эти методы:
Асинхронно запрашивать статический файл settings.json
, чтобы получить текущий файл (в моем случае с Axios)
Сохраните значения в специальном разделе хранилища (см. VueX или любую более простую структуру хранилища). В моем случае это выглядит примерно так:
Store.ts
let store = {
...
// Will receive our config.json file content
settings: {},
};
export default store;
App.vue
mounted() {
Axios.get('./settings.json')
.then((response) => {
Store.Settings = response.data;
})
}
Это может быть не идеально, но нет необходимости во внешней технологии, настройки доступны из каждого компонента, точно так же, как ваши состояния в магазине.
Дайте мне знать, если это звучит странно или есть лучшее решение.
Я только что опубликовал полное решение для этого здесь: stackoverflow.com/questions/54004759/…