Vite III: env o'zgaruvchilar va rejimlar

Qisqacha: Vite .env fayllardagi qiymatlarni rejimga (development, production, o'zingiz bergan nom) qarab o'qiydi. Brauzer kodiga faqat VITE_ bilan boshlangan o'zgaruvchilar tushadi — import.meta.env.VITE_API_URL. Qiymat build vaqtida JavaScript fayl ichiga matn bo'lib yoziladi, shuning uchun VITE_ o'zgaruvchida sir (parol, token) bo'lmasligi kerak: uni saytni ochgan har kim ko'radi.

Bu darsda

• .env, .env.local, .env.[mode], .env.[mode].local fayllari qaysi tartibda o'qilishini bilasiz.
• import.meta.env dagi MODE, DEV, PROD, BASE_URL ni ishlatasiz.
• VITE_ prefiksi nima uchun borligini va brauzerda nega sir saqlab bo'lmasligini tushuntira olasiz.
• vite-env.d.ts bilan o'zgaruvchilarga tur berasiz va --mode staging bilan alohida build qilasiz.
• vazifalar dagi API manzilini koddan .env ga ko'chirasiz va unutilgan qiymatni build'da ushlaysiz.

Oldin bilishingiz kerak: Vite II: vite.config, Kengaytirish va declaration merging, Declaration fayllari, .gitignore.

1. Nega bu kerak?

vazifalar ning asosiy.ts faylida bitta qator bor:

const api = apiKlient({
  asosiyUrl: "https://ilmhamroh.uz/api/mashq",

Manzil kodga "qotirib" yozilgan. Hozircha muammo yo'q — API bitta. Lekin 25-qismda o'z backend'ingizni yozasiz: u kompyuteringizda http://localhost:3000 da ishlaydi. Har safar sinash uchun asosiy.ts ni o'zgartirasizmi? Keyin commit'dan oldin qaytarishni unutasiz — va sayt foydalanuvchilari sizning kompyuteringizga so'rov yuboradi.

Jasur akaning talabi ham shunday: "«Bahor» saytining ikki nusxasi bo'lsin — haqiqiy va sinov. Sinov nusxasi boshqa API bilan ishlasin". Kod bitta, sozlama har xil.

Yechim — muhit o'zgaruvchilari (environment variables): dastur tashqaridan oladigan nomli qiymatlar. Ular kod ichida emas, alohida faylda yoki terminalda turadi. Kod esa faqat nomni biladi: "API manzilini ber". Oshxona o'xshatishi: retsept "tuz — ta'bga ko'ra" deydi. Toshkentdagi filial bir xil, Samarqanddagisi boshqacha tuzlaydi — retsept esa bitta.

2. .env fayl va VITE_ prefiksi

2.1 Birinchi .env

Sardorning bahor-menyu loyihasida ildizga .env fayl yaratamiz:

VITE_TITLE=umumiy .env
VITE_API_URL=https://example.com/api
DB_PAROL=qwerty123

Format oddiy: har qatorda NOM=qiymat, qo'shtirnoq shart emas, # bilan boshlangan qator — izoh. Nomlar odatda katta harf va _ bilan.

Kodda o'qish — import.meta.env orqali. src/env.ts:

console.log("env:", JSON.stringify(import.meta.env));
console.log("maxfiy:", import.meta.env.DB_PAROL);
if (import.meta.env.DEV) {
  console.log("faqat dev'da");
}

import.meta — modulning o'zi haqidagi obyekt (ESM import darsidan import.meta.url ni bilasiz). env ni unga Vite qo'shadi — brauzer va Node'da u yo'q.

2.2 Build ichida nima bor

npx vite build dan keyin dist/assets/index-….js ichidan shu qatorni topdik (minifikatsiya qilingan, bir bo'lak):

JSON.stringify({BASE_URL:`/`,DEV:!1,MODE:`production`,PROD:!0,SSR:!1,VITE_API_URL:`https://api.example.com`,VITE_TITLE:`.env.local`})

Uch narsaga qarang:

1. import.meta.env yo'qoldi. Uning o'rnida tayyor obyekt turibdi. Vite build vaqtida import.meta.env ni qiymatlar bilan almashtirdi — define dagidek matnni almashtirish.
2. DB_PAROL yo'q. Kodda import.meta.env.DB_PAROL bor edi, build'da esa console.log("maxfiy:", void 0) — ya'ni undefined. Vite brauzer kodiga faqat VITE_ bilan boshlanadigan nomlarni beradi.
3. faqat dev'da qatori yo'q. import.meta.env.DEV build'da false bo'ldi, if (false) bloki esa o'lik kod sifatida o'chirildi (Tree shaking).

(VITE_TITLE nega .env.local — pastda tushuntiramiz.)

VITE_ prefiksi — himoya devori. .env faylda ko'pincha serverga tegishli sirlar ham turadi: baza paroli, to'lov tizimi kaliti. Vite ularni tasodifan saytga chiqarib yubormasligi uchun "ochiq" qiymatlarni alohida belgilashni talab qiladi. Prefiksni envPrefix sozlamasi bilan o'zgartirish mumkin, lekin kerak emas.

2.3 Tayyor o'zgaruvchilar

Vite har doim beshta o'zgaruvchi qo'shadi:

Beshinchisi — SSR (server tomonda chizish, 23-qismda Next.js bilan; hozir bilish shart emas) — biz uchun doim false.

Dev serverda Vite xuddi shu ishni boshqacha qiladi: faylni so'raganingizda boshiga bitta qator qo'shadi. curl http://localhost:5771/src/env.ts bilan ko'rdik (birinchi qator):

import.meta.env = {"BASE_URL": "/", "DEV": true, "MODE": "development", "PROD": false, "SSR": false, "VITE_API_URL": "https://example.com/api", "VITE_TITLE": "umumiy .env"};console.log("env:", JSON.stringify(import.meta.env));

Qiymatlar boshqa — chunki rejim boshqa. Bu bizni keyingi bo'limga olib keladi.

Tekshirib ko'ring: .env da API_KEY=abc bor, kodda import.meta.env.API_KEY. Build'dan keyin sayt nimani ko'radi?

3. Rejimlar va fayllar tartibi

3.1 Rejim nima

Oldingi darsda rejim (mode) ni ko'rdik: vite — development, vite build — production, --mode bilan — istalgan nom. Rejimning asosiy vazifasi — qaysi .env fayllar o'qilishini tanlash.

Vite to'rt xil faylni qidiradi:

Bir nom bir nechta faylda bo'lsa — aniqrog'i yutadi. Tartib (kuchsizdan kuchliga): .env → .env.local → .env.[mode] → .env.[mode].local. Ulardan ham kuchlisi — terminaldagi o'zgaruvchi.

flowchart LR
  A[".env"] --> B[".env.local"]
  B --> C[".env.production"]
  C --> D[".env.production.local"]
  D --> E["terminal:<br/>VITE_X=... vite build"]

O'ngga qarab har fayl chapdagini "ustidan yozadi". Pastdagi tajribada buni raqamlar bilan ko'ramiz.

3.2 Tajriba: kim yutadi

bahor-menyu da to'rt fayl:

Uch xil build va natija (build ichidagi qiymatlar):

• Birinchi qator: VITE_API_URL — .env.production dan (u .env dan kuchli). VITE_TITLE — .env.local dan: .env.production da bu nom yo'q, .env.local esa .env dan kuchli.
• Ikkinchi qator: rejim staging — endi .env.production umuman o'qilmadi, .env.staging ishladi. .env.staging dagi VITE_TITLE .env.local ni ham yengdi.
• Uchinchi qator: terminaldagi qiymat hamma fayldan kuchli. CI'da (GitHub Actions) qiymatni shunday berish qulay.

dev uchun ham xuddi shunday — faqat rejim development va .env.development o'qiladi.

3.3 .local fayllar — faqat sizniki

.local bilan tugaydigan fayllar — shaxsiy sozlamalar: sizning kompyuteringizdagi backend manzili, sinov kaliti. Ular git'ga tushmaydi — .gitignore ga bitta qator yetadi:

*.local

Jamoadagi har kim o'z .env.development.local faylini yozadi, umumiy .env.development esa repo'da qoladi.

3.4 staging rejimi va PROD

Staging ("sahna", sinov nusxasi) — haqiqiy saytning nusxasi, lekin sinov API'si bilan. Unga vite build --mode staging va .env.staging yetadi. package.json da qulay skript:

{
  "scripts": {
    "build": "vite build",
    "build:staging": "vite build --mode staging"
  }
}

Tuzoq: staging build'da import.meta.env.MODE — "staging", lekin PROD — baribir true (yuqoridagi tajribada MODE:"staging",PROD:!0). PROD "bu production rejimimi?" degani emas, "bu minifikatsiya qilingan build'mi?" degani. Rejimga qarab ish qilish kerak bo'lsa — MODE ni solishtiring.

Tekshirib ko'ring: .env da VITE_A=1, .env.development.local da VITE_A=2, .env.production da VITE_A=3. npm run dev va npm run build da VITE_A nima?

4. Build vaqti, ishga tushish vaqti emas

4.1 Qiymat faylga "pishib" qoladi

«Build ichida nima bor» bo'limidagi chiqishga yana qarang: VITE_API_URL: dan keyin manzil — matn. Saytni serverga yuklagandan keyin .env ni o'zgartirsangiz, hech narsa o'zgarmaydi: dist/ dagi fayl allaqachon yozilgan. Yangi qiymat uchun — yangi build.

Bu — build vaqtidagi (build-time) env. Uning teskarisi — ishga tushish vaqtidagi (runtime) env: Node server har ishga tushganda process.env ni o'qiydi, qiymatni server qayta ishga tushganda almashtirish mumkin (24-qismda). Brauzer kodida process.env yo'q — u yerda faqat build vaqti bor.

Bitta build'ni bir nechta serverga turli sozlama bilan qo'yish kerak bo'lsa (katta kompaniyalarda uchraydi), sozlama brauzerda alohida fayldan olinadi: ilova ochilganda fetch("./config.json"). Bu murakkabroq — kichik loyihada rejim + qayta build yetarli.

4.2 .env o'zgarsa — dev server qayta ishga tushadi

Dev server ishlab turganda .env.development ni saqlasak:

19:25:18 [vite] .env.development changed, restarting server...
19:25:18 [vite] server restarted.

Config fayl kabi: brauzer sahifani qayta yuklaydi va yangi qiymatni oladi.

4.3 Qiymat doim satr

Jasur aka menyuda ko'pi bilan nechta taom ko'rsatilishini sozlamoqchi. Sardor .env ga VITE_MAX_TAOM=5 yozdi va kodda keyingi raqamni hisobladi:

console.log("keyingi:", import.meta.env.VITE_MAX_TAOM + 1);
console.log("bormi:", import.meta.env.VITE_YOQ === undefined);

Build ichida:

console.log(`keyingi:`,`51`),console.log(`bormi:`,!0)

6 emas, "51"! .env faylda tur yo'q — hamma qiymat satr. "5" + 1 — yashirin coercion: satrlar ulanadi, sonlar qo'shilmaydi. Vite buni build vaqtida o'zi hisoblab, tayyor "51" ni yozib qo'ydi. Ikkinchi qator: yo'q o'zgaruvchi — undefined (!0 — true).

Qoida: son kerak bo'lsa — Number(import.meta.env.VITE_MAX_TAOM), mantiqiy qiymat kerak bo'lsa — === "true" bilan solishtiring. VITE_DEBUG=false ham satr: if ("false") — rost, chunki bo'sh bo'lmagan satr har doim truthy. Turlar faylida (vite-env.d.ts) bunday o'zgaruvchilarni ham string deb yozing — number deb yozsangiz, TypeScript sizga yolg'on gapiradi.

5. Turlar: vite-env.d.ts

5.1 TypeScript import.meta.env ni bilmaydi

TypeScript uchun import.meta da env yo'q — uni Vite qo'shadi. Turlarni Vite'ning vite/client paketidan olish kerak. npm create vite shabloni buni tsconfig.json da qiladi ("types": ["vite/client"]), yoki alohida faylda:

/// <reference types="vite/client" />

/// <reference types="…" /> — "shu paketning turlarini ham ol" degan maxsus izoh (uch chiziq bilan). U faylning eng boshida bo'lishi shart.

vite/client MODE, DEV, PROD, BASE_URL ni biladi. Bizning VITE_API_URL ni esa — yo'q: u [key: string]: any orqali o'tadi, ya'ni turi any. O'z o'zgaruvchilarimizni qo'shamiz:

interface ImportMetaEnv {
  readonly VITE_TITLE: string;
  readonly VITE_API_URL: string;
}

Bu — declaration merging: Vite'da ham interface ImportMetaEnv bor, bizniki u bilan birlashadi. type bilan bo'lmaydi — type birlashmaydi. readonly — kodda import.meta.env.VITE_TITLE = "…" deb yozib bo'lmasin.

5.2 Nimani ushlaydi, nimani yo'q

Ikki xato bilan sinadik (tsc --noEmit):

const x: number = import.meta.env.VITE_TITLE;
const y = import.meta.env.VITE_TITEL;

src/xato.ts(1,7): error TS2322: Type 'string' is not assignable to type 'number'.

Birinchisi ushlandi: tur endi string. Ikkinchisi — imlo xatosi (TITEL) — ushlanmadi: vite/client dagi [key: string]: any istalgan nomga ruxsat beradi. vazifalar da ham aynan shunday chiqdi (VITE_API_UR — xato yo'q). Shuning uchun turlar yetarli emas — qiymat bor-yo'qligini build vaqtida tekshirish kerak. Buni vazifalar qadamida qilamiz.

Tekshirib ko'ring: vite-env.d.ts da readonly VITE_API_URL: string deb yozdik. Agar .env da bu o'zgaruvchi umuman bo'lmasa, TypeScript ogohlantiradimi?

6. Hujumchi nigohi

VITE_ o'zgaruvchi — ochiq ma'lumot. Sinab ko'rdik: .env ga VITE_DB_PAROL=qwerty123 qo'shib build qildik va dist/assets/*.js da qwerty123 ni qidirdik — topildi. Bizning kod import.meta.env ni to'liq chiqaradi, shuning uchun hamma VITE_ qiymat faylga tushdi. Kod buni qilmasa ham, ishlatilgan har VITE_ qiymat JS faylda ochiq matn bo'lib turadi.

Hujumchi nima qiladi? Hech qanday "buzish" kerak emas: saytni ochadi, DevTools → Sources (yoki curl) bilan JS faylni oladi va VITE_, key, token, sk_ so'zlarini qidiradi. Minifikatsiya satrlarni yashirmaydi. Source map yoqilgan bo'lsa (Source map'lar) — manba kod ham o'qiladi.

Qoidalar:

• VITE_ — faqat brauzer baribir bilishi mumkin bo'lgan narsalar: API manzili, sayt nomi, xarita xizmatining ommaviy kaliti (domen bilan cheklangan).
• Parol, to'lov kaliti, bazaga ulanish satri — hech qachon VITE_ emas. Ular faqat serverda (backend) yashaydi; brauzer server orqali ishlaydi (fetch asoslari dagi "Hujumchi nigohi" — xuddi shu qoida).
• Tasodifan sir saytga chiqib ketsa — .env dan o'chirish yetarli emas: eski build va git tarixi uni saqlaydi. Kalitni xizmatning o'zida bekor qilib, yangisini oling.

Yana bir tuzoq — loadEnv ning uchinchi argumenti. loadEnv(mode, papka, "") — "prefiksdan qat'i nazar hammasini ber". Bizda u 106 ta o'zgaruvchi qaytardi: .env dagilar va kompyuterning butun muhiti (Path, foydalanuvchi papkasi…). Bu config ichida ishlatish uchun normal. Lekin uni define orqali brauzerga uzatsangiz (define: { ENV: JSON.stringify(env) }) — kompyuteringiz haqidagi ma'lumot saytga chiqadi.

7. Vazifalar qadami: API manzili .env ga

Branch: refactor/env

7.1 Ikkita .env fayl

.env.production:

# npm run build (production rejimi) — sayt shu API bilan ishlaydi.
# VITE_ bilan boshlanadigan qiymat brauzer kodiga YOZILADI
# (import.meta.env): bu yerda sir (parol, token) bo'lmasin
VITE_API_URL=https://ilmhamroh.uz/api/mashq

.env.development:

# npm run dev (development rejimi) — hozircha production bilan bir xil
VITE_API_URL=https://ilmhamroh.uz/api/mashq

Ikkalasi ham git'ga kiradi: API manzili sir emas, u saytda baribir ko'rinadi. Hozircha qiymatlar bir xil — dev manzilini Dev server proxy darsida o'zgartiramiz. .gitignore ga — shaxsiy fayllar uchun:

# Shaxsiy sozlamalar (.env.local, .env.development.local) — faqat
# o'z kompyuteringizda; .env.production va .env.development — umumiy
*.local

7.2 Kod va turlar

assets/js/asosiy.ts:

const api = apiKlient({
  // .env.production / .env.development — Vite build vaqtida qo'yadi
  asosiyUrl: import.meta.env.VITE_API_URL,

Faqat shu o'zgartirilsa, tsc to'xtaydi:

assets/js/asosiy.ts(80,26): error TS2339: Property 'env' does not exist on type 'ImportMeta'.

Tarjimasi: "ImportMeta turida env xususiyati yo'q". Yangi fayl assets/js/vite-env.d.ts:

// import.meta.env turlari (16/#28): vite/client — MODE, DEV, PROD,
// BASE_URL; o'zimizniki — pastda (.env.production,
// .env.development)
/// <reference types="vite/client" />

// interface — Vite'ning ImportMetaEnv'i bilan birlashishi uchun
// (declaration merging, 15/T-16; type bilan bo'lmaydi)
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
}

E'tibor bering: izohlar /// qatoridan oldin turibdi. Bu mumkin — /// dan oldin faqat boshqa izohlar bo'lishi mumkin, kod emas. tsc endi toza. Build ham o'zgarmadi: index chunk hash'i — Dvsf2Sj6, oldingi qadam bilan bayt-bayt bir xil. Ichida (bir bo'lak):

W=Ze({asosiyUrl:`https://ilmhamroh.uz/api/mashq`,kalit:Oe(),...

Qiymat build vaqtida matn bo'lib yozildi — aynan avvalgi kod kabi.

7.3 Unutilgan .env — jim xato

Tajriba: .env.production ni vaqtincha o'chirib build qildik. Build "muvaffaqiyatli":

dist/assets/index-4oOmLEDy.js   25.35 kB │ gzip: 9.48 kB

Ichida esa:

W=Ze({asosiyUrl:void 0,...

void 0 — undefined. Sayt ochiladi, lekin API'siz: har so'rov xato. Testlar ham o'tadi (ular API manzilini o'zi beradi). Bu — eng yomon turdagi xato: hamma yashil, foydalanuvchida esa buzilgan.

7.4 vite.config.ts — funksiya va loadEnv

Config'ni oldingi darsdagi funksiya ko'rinishiga o'tkazamiz va qiymatni tekshiramiz (o'zgarmagan qismi …):

import { defineConfig, loadEnv } from "vite";

// Funksiya ko'rinishi (16/#28): rejim (mode) — "development"
// (npm run dev) yoki "production" (npm run build) — bo'yicha
// .env.<mode> o'qiladi
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  // .env.<mode> yo'q yoki qiymat unutilgan bo'lsa, Vite jim
  // "undefined" yozib yuboradi (o'lchandi) — build'ni to'xtatamiz
  if (!env.VITE_API_URL) {
    throw new Error(
      `VITE_API_URL yo'q: .env.${mode} faylini tekshiring`,
    );
  }
  return {
    plugins: [ … ],
    base: "./",
    build: { … },
  };
});

• loadEnv(mode, process.cwd()) — Vite brauzer uchun qiladigan ishni config ichida qiladi: shu rejimning .env fayllarini o'qib, VITE_ qiymatlarni obyekt qilib qaytaradi. process.cwd() — joriy papka (npm run uni loyiha ildiziga qo'yadi).
• throw new Error(...) — config'dagi istisno Vite'ni to'xtatadi. Endi .env.production siz:

failed to load config from …\vazifalar\vite.config.ts
error during build:
Error: VITE_API_URL yo'q: .env.production faylini tekshiring

Build qizil, CI to'xtaydi, buzuq sayt chiqmaydi. Xabar o'zbekcha va aniq: qaysi fayl. Qolgan return { … } — avvalgi obyekt, faqat bir pog'ona ichkariga surildi. Shuning uchun diff katta ko'rinadi.

7.5 Tekshirish va commit

npm run check
npm run build

Natija: testlar 145/145, lint va format:check toza, build — o'sha hash. Brauzer tekshiruvi (159 ta) ham o'tdi.

git switch -c refactor/env
git add .
git commit -m \
"refactor: API manzili .env dan (import.meta.env), loadEnv tekshiruvi"

Diff: 6 fayl, +82 −51. Keyin odatdagidek — push, PR, gh pr merge --merge.

Tekshirib ko'ring: Nega .env.production ni .gitignore ga qo'shmadik? Axir "env fayllar git'ga kirmaydi" degan maslahatni eshitgan bo'lishingiz mumkin.

8. Ko'p uchraydigan xatolar

8.1 VITE_ siz nom — undefined

API_URL=... deb yozilgan, kodda import.meta.env.API_URL — undefined, xato yo'q. Prefiksni tekshiring.

8.2 process.env brauzer kodida

Node darslaridan odat bo'lib process.env.VITE_API_URL yozilsa — dev'da konsolda:

Uncaught ReferenceError: process is not defined

Brauzerda process yo'q. Vite kodi uchun — faqat import.meta.env. (vite.config.ts ichida esa aksincha — process.env ham, loadEnv ham ishlaydi: u Node'da bajariladi.)

8.3 .env ni o'zgartirdim — sayt o'zgarmadi

Build qilingan saytda qiymat faylga yozilgan — qayta build kerak. Dev'da Vite o'zi qayta ishga tushadi, lekin brauzer vkladkasi yopiq bo'lsa, yangilang.

8.4 Bo'sh joy va qo'shtirnoq

VITE_TITLE = Bahor (tenglik atrofida bo'sh joy) yoki qiymatdagi # — natija kutilmagan bo'lishi mumkin. Qoida: NOM=qiymat, bo'sh joysiz; qiymatda bo'sh joy yoki # bo'lsa — qo'shtirnoqda: VITE_TITLE="«Bahor» #1".

9. Mashqlar

1-mashq (oson): Qaysi qiymat?

Fayllar: .env — VITE_COLOR=yashil, .env.local — VITE_COLOR=sariq, .env.production — VITE_COLOR=qizil, .env.staging.local — VITE_COLOR=ko'k.

1. vite (dev) —
2. vite build —
3. vite build --mode staging —
4. VITE_COLOR=oq vite build —

2-mashq (o'rta): Sarlavha .env dan

kurs/mashqlar/16/28-env/ da oldingi darsdagi bahor-menyu nusxasi:

1. .env da VITE_TITLE=«Bahor» menyusi va VITE_API_URL=https://ilmhamroh.uz/api/mashq; .env.staging da VITE_TITLE=«Bahor» menyusi (sinov).
2. main.ts: document.title va <h1> — VITE_TITLE dan. Faqat dev'da konsolga API manzilini chiqaring.
3. src/vite-env.d.ts da ikkala o'zgaruvchiga tur bering.
4. vite build va vite build --mode staging — build ichida qaysi sarlavha? Dev qatori build'ga tushdimi?

// Bizning o'zgaruvchilar — vite/client turlariga qo'shiladi
interface ImportMetaEnv {
  readonly VITE_TITLE: string;
  readonly VITE_API_URL: string;
}

const title = import.meta.env.VITE_TITLE;
document.title = title;
document.querySelector("h1")!.textContent = title;

if (import.meta.env.DEV) {
  console.log("API:", import.meta.env.VITE_API_URL);
}

3-mashq (qiyin): Majburiy o'zgaruvchilar

vite.config.ts yozing: VITE_TITLE va VITE_API_URL — majburiy. Qaysi biri yo'q bo'lsa, build to'xtasin va xabarda hamma yetishmaganlar ro'yxati bo'lsin. Sinash: .env ni vaqtincha boshqa nomga o'zgartirib, vite build --mode staging.

// vite.config.ts — 3-mashq: majburiy env o'zgaruvchilar
import { defineConfig, loadEnv } from "vite";

const REQUIRED = ["VITE_TITLE", "VITE_API_URL"];

export default defineConfig(({ mode }) => {
  // .env, .env.local, .env.<mode>, .env.<mode>.local — birga
  const env = loadEnv(mode, process.cwd());
  const missing = REQUIRED.filter((name) => !env[name]);
  if (missing.length > 0) {
    const names = missing.join(", ");
    throw new Error(`${mode} rejimida yo'q: ${names}`);
  }
  return {};
});

Error: staging rejimida yo'q: VITE_API_URL

10. Real ishda

• Har frontend jamoasida .env.development, .env.production va ba'zan .env.staging bor. CI esa maxfiy bo'lmagan qiymatlarni ham ko'pincha "Variables" bo'limidan terminal o'zgaruvchisi qilib beradi.
• Sir sizib chiqishi — real hodisa turi: GitHub va boshqa xizmatlar ochiq JS fayllarda kalitlarni avtomatik qidiradi. Frontend'dagi kalit — ommaviy deb hisoblanadi.
• Next.js da xuddi shu g'oya, prefiksi boshqa: NEXT_PUBLIC_ (23-qismda).
• Intervyu savollari: "Nega frontend'da sir saqlab bo'lmaydi?", "build-time va runtime env farqi?", ".env.local nima uchun?".

Xulosa

• Vite .env → .env.local → .env.[mode] → .env.[mode].local ni o'qiydi, keyingisi kuchli; terminal o'zgaruvchisi hammasidan kuchli. .local — git'ga kirmaydi.
• Brauzer kodiga faqat VITE_ o'zgaruvchilar tushadi, import.meta.env orqali; plus MODE, DEV, PROD, BASE_URL.
• Qiymat build vaqtida JS faylga matn bo'lib yoziladi — .env ni o'zgartirsangiz, qayta build kerak; VITE_ da sir bo'lmasin.
• vite-env.d.ts turni beradi, lekin nom xatosini ushlamaydi; unutilgan qiymat — loadEnv va throw bilan build'da ushlanadi.
• vazifalar: API manzili .env.production/.env.development da, config funksiya ko'rinishida.

Keyingi dars: Vite IV: assetlar, public papka va maxsus importlar — rasm, CSS va JSON'ni import qilish, public/ va src/ farqi; vazifalar manbasi src/ ga ko'chadi.

Manbalar

• Vite hujjatlari: "Env Variables and Modes" — vite.dev/guide/env-and-mode
• Vite hujjatlari: loadEnv, envPrefix, envDir — vite.dev/config/shared-options
• Vite 8.3.3, Node 24.21.0 — darsdagi hamma build va dev chiqishlari 2026-10 da olingan