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

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

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

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

Можно ли указать vue-cli3 или webpack сохранить определенный файл или папку «как есть»? Или, может быть, есть более чистое решение?

Я только что опубликовал полное решение для этого здесь: stackoverflow.com/questions/54004759/…

Michael A. 03.01.2020 11:11

После краткого обзора ваше решение звучит намного чище, чем мое, и более «совместимо с DevOps»! Спасибо

Glandalf313 05.01.2020 21:40
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
2
2
1 139
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
         })
}

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

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

Другие вопросы по теме