Блог

Там есть public/index.html шаблон, который обрабатывается vue-cli-сервисом и помещается в dist/index.html.

Мы хотим динамически вводить некоторые переменные среды в dist/index.html в kubernetes (после сборки, например, мы создаем, затем развертываем папку dist в разные модули, и kubernetes вводит разные значения в index.html динамически в каждом модуле). Для этого мы используем синтаксис ${FRONTED_WHATEVER}.

Проблема в том, что сборка не работает, если синтаксис ${FRONTED_WHATEVER} представлен в index.html. Webpack, htmlwebpackplugin или что-то еще, что пытается заменить ${..} само собой так и бросает ReferenceError: FRONTEND_WHATEVER is not defined .

Я нашел документацию о введении переменных .env в файлы .html в webpack с использованием синтаксисаlt;%=..%gt;, но там ничего нет о синтаксисе $ { .. }. И, что более важно, нет ничего о том, как пропустить/избежать этой обработки. Я пытался использовать ${} , ${..} ${..} но это не работает или дает правильный результат.

Самый простой способ воспроизвести проблему: создайте новый проект vue2 webpack по умолчанию, а затем добавьте эти строки в заголовок public/index.html:

 lt;scriptgt;  window.FRONTEND_WHATEVER = "${FRONTEND_WHATEVER}"; lt;/scriptgt;  

Цель состоит в том, чтобы получить build/index.html файл с точно такими же строками.