كيف يمكن تحميل متغيرات البيئة في تطبيق React باستخدام Vite؟

Abdelrahman Mostafa10 · 11 يناير

لقد اطلعت على جميع الوثائق من Vite و React.js والمدونات الخاصة بالمطورين، لكنني لم أتمكن من تشغيلها.

لدي ملف .env يحتوي على ما يلي:

VITE_API_KEY = XXX

في ملف firebase.js الخاص بي، أقوم بتحميله على النحو التالي:

const firebaseConfig = {
apiKey: import.meta.env.API_KEY,
// ... باقي الإعدادات
};

// تهيئة Firebase
const app = initializeApp(firebaseConfig);

لكن قيمة apiKey تظهر على أنها null، قمت بإعادة تشغيل خادم التطوير، وإعادة تثبيت node_modules (فقط في حالة)، وتغيير بادئات المتغيرات إلى REACT_APP_XX، وحاولت استخدام الكائن العام process.env.XX، وعملت بشكل أساسي على جميع الطرق المختلفة لقراءة المتغيرات من ملف .env في React.

حاولت أيضًا تسجيل قيم المتغيرات من مكون، لكن النتيجة كانت نفسها.

Hikmat Jaafer · 13 يناير

بداية تأكد من أنك قمت بتثبيت vite , و إذا لم تقوم بتثبيتها بعد ثبتها باستخدام التعليمة

npm init vite@latest

ثم تأكد من أنك قمت بتنفيذ التعليمة التالية لتحميل متغيرات البيئة

npm install dotenv

ثم قم بإنشاء الملف التالي لتحميل متغيراات البيئة vite.config.js وقم بوضع الكود التالي ضمنه

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import dotenv from 'dotenv'

dotenv.config()

export default defineConfig({
  plugins: [reactRefresh()],
})

الأن يمكنك استخدام المتغير الذي وضعته ضمن ملف ال .env في مشروعك بهذا الشكل

const apiKey = process.env.API_KEY;

قم بتنفيذ التعليمة

console.log(apiKey);

لتتأكد من أنك قمت باستيراد ال apiKey بشكل صحيح

كيف يمكن تحميل متغيرات البيئة في تطبيق React باستخدام Vite؟

السؤال

Abdelrahman Mostafa10

1 جواب على هذا السؤال

Recommended Posts

Hikmat Jaafer

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية