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

Rayden Storm · 6 مارس 2021

مرحبا

لقد قمت بانشاء مشروع react عن طريق create-react-app واحتجت لأن أعدل الاعدادات في axios واضافة رابط قاعدي بهذا الشكل

import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://localhost:4000/api/'
});

export default instance;

ثم أرد تغيير الرابط ليصبح متغير بيئة فأضفت ملفenv.local وأضفت السطر التالي

devapi=http://localhost:4000/api

وقمت بتغيير ملف اعدادات axios

import axios from 'axios';

const instance = axios.create({
    baseURL: process.env.devapi
});

export default instance;

ولكن لم يعمل معي ذلك فما المشكلة

Salah Eddin Beriani2 · 6 مارس 2021

الخطوات التي قمت بها كلها صحيحة عدا تسمية المتغير البيئي ففي مشروع منتج من create-react-app يكون من المفروض عليك أن تبدأ تسمية المتغيرات البيئية ب REACT_APP كالتالي :

REACT_APP_devapi=http://localhost:4000/api

import axios from 'axios';

const instance = axios.create({
    baseURL: process.env.REACT_APP_devapi
});

export default instance;

وكل مرة تضيف أو تغير متغير بيئي عليك باعادة تشغيل السيرفر

محمد أيت لعرايك · 7 مارس 2021

إذا كنت قد أنشأت تطبيقك باستخدام تطبيق create-react-app ، فمشروعك يتوفر على ملف env. خاص يكون شكله كما هو مبين هنا .

ولجلب متغيرات البيئة ما عليك سوى إرفاق REACT_APP مسبقًا بكل متغير ، مثلا إدا كنت تريد devapi ما عليك سوى كتابة

process.env.REACT_APP_devapi

لنفترض أنك تريد إظهر المتغير PORT داخل مكون react . ما عليك سوى كتابة :

render() {
  return (
    <div>
      <small>You are running this application in port <b>{process.env.REACT_APP_PORT}</b></small>
    </div>
  );
}

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

السؤال

Rayden Storm

2 أجوبة على هذا السؤال

Recommended Posts

Salah Eddin Beriani2

محمد أيت لعرايك

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية