Как разработать приложение vue-cli, которое будет настроено после сборки?

Question

У меня есть работающее приложение vue-cli, которое я могу собрать без проблем.Теперь я хочу упаковать одну сборку, которая будет развернута на нескольких серверах.Моя проблема в том, что, в зависимости от сервера, мне придется настроить некоторые простые переменные (порт сервера, токен API и т. Д.).

Очевидно, что это не подходящее решение для запуска нескольких сборок (основанных на.env файлы или что-то еще) из-за контекста.Я часто получаю информацию о настройках на сайте и вынужден быстро их настраивать.

До работы с Webpack и всем его базовым процессом компиляции у меня был классический js-файл, в который встраивались настройки, и я хотел бы создать нечто подобное.Насколько я знаю, файлы, созданные в папке public, недоступны из компонентов vue (с директивой import) и после минимизации не являются решением для настройки параметров.

Можно ли сказать vue-cli3или веб-пакет для хранения определенного файла или папки "как есть"?Или, может быть, есть более чистое решение?

Answer 1

Ну, на всякий случай, если кому-то когда-нибудь понадобится сделать что-то подобное, вот мое решение:

1. Я создаю файл конфигурации un в общедоступной директории, например settings.json

2. В компоненте App.vue я указываю метод mounted(), который будет автоматически вызываться при запуске компонента (см. Жизненный цикл компонентов VueJs, если необходимо). Это методы:

   1. Асинхронный запрос статического файла settings.json для получения текущего файла (с Axios в моем случае)

   2. Сохраните значения в выделенном разделе хранилища (см. 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;
         })
}

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

Дайте мне знать, если это звучит странно или есть лучшее решение.