مقدمه
شما در حال ساخت یک برنامه React با Vite هستید و تصمیم می گیرید کلیدهای حساس یا مقادیر پیکربندی را در یک پرونده .env ذخیره کنید. شما همه چیز را تنظیم کردید:
vite_api_key = “123456”
و سپس سعی کنید آن را در برنامه خود وارد کنید:
Console.log (Import.meta.env.vite_api_key) ؛
اما آنچه شما می گیرید … تعریف نشده است.
چه چیزی می دهد؟
اشتباه رایج: پرونده .env در فهرست اشتباه
مسئله معمولاً پیکربندی Vite نیست ، و همچنین JavaScript شما نیست. متداول ترین مقصر قرار دادن پرونده است.
پرونده .env شما باید در فهرست اصلی پروژه Vite شما باشد – همان سطح vite.config.ts یا pack.json.
✅ درست:
vite_stream_key = “ABC123”
❌ نادرست:
stream_key = “ABC123” // تعریف نشده است. “vite_” را در پیشوند اضافه کنید
❌ اشتباه:
my-app/
src/
└= .ENV
my-app/
├= .ENV
vite vite.config.ts
pack.json.
src/
چگونه متغیرهای ENV را کنترل می کنند
Vite فقط متغیرهایی را که با پیشوند VITE_ شروع می شود ، در معرض کد سمت مشتری قرار می دهد. اگر متغیر شما از این پیشوند استفاده نمی کند ، به هیچ وجه ظاهر نمی شود.
✅ درست:
vite_stream_key = “ABC123”
❌ نادرست:
stream_key = “ABC123” // تعریف نشده است. “vite_” را در پیشوند اضافه کنید
برای استفاده از مقدار:
Console.log (Import.meta.env.vite_stream_key) ؛
جایزه: بارگیری مجدد سرور DEV
هر زمان که پرونده .env را تغییر دهید ، باید سرور Vite Dev را مجدداً راه اندازی کنید. در غیر این صورت ، تغییراتی برداشت نمی شود.
npm run dev
نخ نخ
نکته نهایی اشکال زدایی
برای تأیید کلیه متغیرهای موجود در env:
Console.Log (Import.Meta.Env) ؛
این لیست کامل از متغیرهای موجود در معرض Vite را در زمان اجرا نشان می دهد.
پایان
اگر از متغیر Vite Env خود تعریف نمی کنید:
✅ مطمئن شوید که با vite_ شروع می شود
file پرونده .env خود را در ریشه پروژه قرار دهید
serv سرور dev را مجدداً راه اندازی کنید
یک اشتباه کوچک – اما می تواند ساعت ها برای شما هزینه کند. امیدوارم این پست شما را از آن نجات دهد!
