vite.config.ts + vite-env.d.ts — konfigūracija ir tipai

Du failai kodo stulpelyje kaip skirtukai: vite.config.ts (kaip Vite serveruoja ir surenka) ir src/vite-env.d.ts (aplinkos kintamųjų tipai). vite.config.ts valdo, kaip Vite serveruoja (dev) ir surenka (build).

Trys dalys:

server — dev serverio nustatymai (portas 5173, atidaryti naršyklę).
build — outDir: 'dist' (kur atsiduria pakuotė) ir sourcemap: true (kad produkcijos klaidų pėdsakai būtų skaitomi).
define — įrašo konstantą surinkimo metu (pvz. versijos numerį „About" langui).

Svarbiausia — loadEnv ir VITE_ prefiksas. Vite naršyklei atskleidžia tik kintamuosius, prasidedančius VITE_:

import.meta.env.VITE_NASA_API_KEY;   // ✅ pasiekiama naršyklėje
import.meta.env.DATABASE_PASSWORD;   // ❌ undefined — nėra VITE_ prefikso

Tai — sąmoningas apsauginis turėklas. Pavadinęs kintamąjį be VITE_, jo į pakuotę neįtrauksi net norėdamas — Vite jį palieka tik surinkimo aplinkai. Todėl VITE_ prefiksas verčia sąmoningai nuspręsti „taip, šitą galima parodyti naršyklei".

Dar viena detalė — tipizuoti kintamuosius. src/vite-env.d.ts aprašo, kokių VITE_ kintamųjų tikiesi:

interface ImportMetaEnv {
  readonly VITE_NASA_API_KEY: string;
}

Tai duoda autocomplete IR kompiliavimo klaidą, jei parašai su klaida (VITE_NASA_API_KYE) — vietoj tylaus undefined vykdymo metu.

Patarimas. .env failą niekada neįkelk į git (jis .gitignore). Vietoj to komituoji .env.example su tuščiomis ar demo reikšmėmis — kad kiti žinotų, kokių kintamųjų reikia, bet negautų tavo tikrų. Tai standartinė praktika kiekvienam projektui su paslaptimis.

vite.config.ts SUKURTI

Sukurk šį failą kataloge ./

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  // Load .env files. Only vars prefixed VITE_ are exposed to the browser —
  // that prefix is a GUARD RAIL: it makes it hard to leak a server secret into
  // the bundle by accident. A var without the prefix stays build-only.
  const env = loadEnv(mode, process.cwd(), '');

  return {
    server: { port: 5173, open: true },
    build: {
      outDir: 'dist',        // `vite build` writes the deployable bundle here
      sourcemap: true,       // ship maps so production stack traces are readable
    },
    define: {
      // Inline a constant at build time (e.g. show the version in an About box)
      __APP_VERSION__: JSON.stringify(process.env['npm_package_version'] ?? '0.0.0'),
    },
  };
});

vite-env.d.ts SUKURTI

Sukurk šį failą kataloge src/

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

// Declaring the env vars we use gives us autocomplete AND a compile error
// if we typo one — instead of a silent `undefined` at runtime.
interface ImportMetaEnv {
  readonly VITE_NASA_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}