В VueJS есть способ считывать переменные среды или значения конфигурации в статический файл / файл во время этапа сборки

Question

Справочная информация:

Использование VueJS, особенно в отношении шаблона PWA https://github.com/vuejs-templates/pwa

Существует этап сборки npm run build, который объединяет проект и переносит любое Vue в браузер распространения JS.

Файлы в / static / являются "статическими" и просто скопированы в dist, но мне интересно, можно ли вообще его шаблонировать или читать в некоторых динамических значениях.

Вопрос:

Возможно ли иметь статические файлы, которые работают с / static в URL, но также и во время сборки могут принимать динамические значения?

Больше контекста:

Проблема в том, что Vue компилирует все в каталог dist.

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

Маршрутизация сервера для сопоставления файла в / static / с кэшированным динамическим файлом находится вне Vue. Вопрос касается необходимости размещения некоторых «файлов с абсолютным патчем» (статических), но некоторые файлы могут иметь внутренне 1-2 URL-адреса, которые должны изменяться в файлах в зависимости от того, какая конфигурация используется, dev, prod, staging ... так же, как пример варианта использования.

Answer 1

Решение, которое я нашел, состояло в том, чтобы использовать CopyWebpackPlugin, который изначально присутствует внутри build/webpack.prod.conf.js

Это плагин, который копирует файлы из статического в dist / static.

Вы можете использовать process.env.NODE_ENV, чтобы позволить вам копировать определенные файлы из статического в dist.

Я решил просто сохранить специфичные для среды копии файлов с измененными значениями, но вы можете легко добавить код в этот файл для анализа и копирования любых конкретных файлов, которые вы хотите.