Свой префикс в Vite

Свой префикс заменяет VITE_ и открывает в код только имена с этим началом.

Поле envPrefix в vite.config.js задаёт начало имени вместо VITE_. После смены префикса строки с VITE_ в клиент не попадают, а видны только имена с новым началом. Возьмём префикс APP_ и короткое имя переменной.

Запишем значение в файле окружения режима staging:

APP_TITLE=hello
VITE_TITLE=ignored

Добавим префикс в конфигурацию:

import { defineConfig } from 'vite'

export default defineConfig({
  envPrefix: 'APP_',
})

В модуле выведем обе строки и посмотрим, какая дошла до браузера:

const appLine = import.meta.env.APP_TITLE ?? '(пусто)';
const viteLine = import.meta.env.VITE_TITLE ?? '(пусто)';

document.body.append(document.createTextNode('APP_TITLE: ' + appLine));
document.body.append(document.createElement('br'));
document.body.append(document.createTextNode('VITE_TITLE: ' + viteLine));

Запустим сервер с режимом staging:

npx vite --mode staging

Откроем страницу. Первая строка покажет hello, вторая - (пусто): префикс APP_ заменил VITE_ для этого проекта.

Задайте префикс WEB_, добавьте в .env.preview переменную WEB_CAPTION со значением ready и выведите её на страницу в режиме preview.

Добавьте в тот же файл строку VITE_CAPTION=hello и убедитесь, что import.meta.env.VITE_CAPTION в браузере остаётся пустым.