Свои переменные в Vite
Своя переменная видна в коде, только если её имя начинается с VITE_.
Строки из файла
.env
в корне проекта
Vite подхватывает при старте.
Запишем пару имён:
одно без префикса,
другое с префиксом
VITE_.
Значения возьмём простые,
без намёка на пароли:
NAME=ignored
VITE_TITLE=hello
В модуле прочитаем оба поля
из import.meta.env
и выведем их на страницу
двумя строками:
const nameLine = import.meta.env.NAME ?? '(пусто)';
const titleLine = import.meta.env.VITE_TITLE ?? '(пусто)';
document.body.append(document.createTextNode('NAME: ' + nameLine));
document.body.append(document.createElement('br'));
document.body.append(document.createTextNode('VITE_TITLE: ' + titleLine));
Перезапустим сервер разработки,
чтобы он перечитал
.env,
и откроем страницу снова.
Первая строка покажет
(пусто):
NAME
в клиент не попала.
Вторая строка выведет
hello
из VITE_TITLE.
На странице видно только значение
с префиксом.
Добавьте в .env переменную VITE_LABEL со значением hello и выведите её из src/main.js на страницу.
Добавьте в .env строку CAPTION=ready без префикса и убедитесь, что import.meta.env.CAPTION в браузере остаётся пустым.
