"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > التعامل مع متغيرات البيئة في Vite

التعامل مع متغيرات البيئة في Vite

تم النشر بتاريخ 2024-11-16
تصفح:848

Handling Environment Variables in Vite

في تطوير الويب الحديث، تعد إدارة البيانات الحساسة مثل مفاتيح API وبيانات اعتماد قاعدة البيانات والتكوينات المختلفة لبيئات مختلفة أمرًا ضروريًا. قد يؤدي تخزين هذه المتغيرات مباشرة في التعليمات البرمجية إلى مخاطر أمنية وتعقيد عملية النشر. توفر Vite، وهي أداة إنشاء واجهة أمامية حديثة، طريقة مباشرة لإدارة متغيرات البيئة من خلال ملفات .env.

ما هو ملف .env؟

ملف .env هو ملف تكوين بسيط يستخدم لتحديد المتغيرات الخاصة بالبيئة. يمكن الوصول إلى هذه المتغيرات داخل التطبيق الخاص بك مع البقاء منفصلة عن الكود المصدري. تسمح هذه الممارسة بإدارة البيئات المختلفة بسهولة - التطوير والتجهيز والإنتاج - دون الحاجة إلى تشفير البيانات الحساسة.

متغيرات البيئة في فايت:

يأتي Vite مزودًا بدعم مدمج لمتغيرات البيئة، مما يسهل إدخال قيم مختلفة بناءً على البيئة الحالية. إليك كيفية تعامل Vite مع متغيرات البيئة:

المتغيرات العامة: يقوم Vite بإدخال متغيرات البيئة في وقت الإنشاء.
المتغيرات البادئة: فقط المتغيرات البادئة بـ VITE_ هي التي تتعرض لكود JavaScript من جانب العميل لأسباب أمنية. لن يكون من الممكن الوصول إلى أي متغيرات غير مسبوقة بهذه الطريقة في المتصفح.

مثال لمتغير بيئة Vite:

VITE_API_URL=https://api.example.com

إعداد ملفات .env في Vite
يدعم Vite ملفات .env متعددة، مما يسمح لك بتحديد متغيرات البيئة لبيئات معينة. إليك الإعداد النموذجي:

.env: الملف الافتراضي لمتغيرات البيئة المشتركة عبر جميع البيئات.
.env.development: متغيرات خاصة ببيئة التطوير.
.env.production: متغيرات خاصة ببيئة الإنتاج.

مثال لملف .env:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

مثال لملف .env.development:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

مثال لملف .env.production:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

الوصول إلى متغيرات البيئة في فايت

للوصول إلى متغيرات البيئة داخل مشروع Vite الخاص بك، استخدم كائن import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

يستبدل Vite تلقائيًا قيم import.meta.env أثناء عملية الإنشاء بناءً على البيئة الحالية.

إدارة بيئات متعددة:

يمكن تخصيص ملفات Vite.env لبيئات مختلفة مثل التطوير والتجهيز والإنتاج. اعتمادًا على البيئة التي تتواجد فيها، سيقوم Vite بتحميل ملف .env المناسب:

يؤدي تشغيل البرنامج إلى تحميل ملف .env.development.
يؤدي تشغيل vite build إلى تحميل ملف .env.production.
التشغيل في بيئة محددة:

vite --mode staging

تصحيح متغيرات البيئة:

إذا كنت تواجه مشكلات تتعلق بعدم عمل متغيرات البيئة كما هو متوقع، فتحقق مما يلي:

  • بادئة المتغير: تأكد من أن جميع المتغيرات من جانب العميل تحتوي على البادئة VITE_، حيث يتجاهل Vite المتغيرات التي لا تحتوي على هذه البادئة.
  • ترتيب تحميل Env: تأكد من وجود الملفات .env والملفات الخاصة بالبيئة في جذر المشروع وتسميتها بشكل صحيح.
  • التحقق من عملية البناء: استخدم console.log(import.meta.env) لرؤية كافة متغيرات البيئة المتاحة أثناء التطوير.

خاتمة::

يُسهل دعم Vite المدمج لمتغيرات البيئة من خلال ملفات .env إدارة التكوينات عبر بيئات مختلفة.

بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/padmajothi_athimoolam_23d/handling-environment-variables-in-vite-480b?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3