Переменные в странице в Vite

Переменная в странице пишется между знаками процента и заменяется при отдаче html.

Не только JavaScript читает import.meta.env. В index.html можно вставить имя с префиксом VITE_ между двумя знаками %. Сначала зададим значение в файле режима разработки:

VITE_TITLE=hello

В заголовке страницы оставим плейсхолдер вместо готового текста:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>%VITE_TITLE%</title>
  </head>
  <body>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Модуль по-прежнему может выводить своё слово, но вкладка браузера берёт текст из подстановки:

document.body.append(document.createTextNode('hello'));

Запустим сервер разработки и откроем страницу. В заголовке вкладки увидим hello, а не буквальную строку %VITE_TITLE%. Для сборки в .env.production можно задать VITE_TITLE=ready - тогда в dist/index.html заголовок станет ready после команды сборки.

Задайте VITE_CAPTION в .env.development и вставьте %VITE_CAPTION% в title index.html, затем проверьте заголовок вкладки при работе сервера разработки.

Положите VITE_CAPTION=ready в .env.production, соберите проект и сравните title в dist/index.html с исходным index.html.