फॉन्ट्स को ऐड-ऐप-ऐप बेस्ड प्रोजेक्ट्स में कैसे जोड़ें?

177

मैं क्रिएट-रिएक्शन-ऐप का उपयोग कर रहा हूं और पसंद नहीं कर रहा हूं eject।

यह स्पष्ट नहीं है कि @ फ़ॉन्ट-फेस के माध्यम से आयात किए गए और स्थानीय रूप से लोड किए गए फोंट कहां जाने चाहिए।

अर्थात्, मैं लोड कर रहा हूं

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

कोई सुझाव?

- संपादित करें

जिसमें दान का जिक्र है, जिसमें दान ने अपने उत्तर का जिक्र किया है

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}
css  reactjs  fonts  webpack  create-react-app 
— मैक्सिम वीक्स्लर
स्रोत
2
क्या आपने अपने उपयोगकर्ता गाइड में "फ़ॉन्ट्स जोड़ना" खंड की जाँच की है?
— दान अब्रामोव
2
@DanAbramov मेरे पास है, फॉन्ट को इम्पोर्ट करने की सिफारिश है। लेकिन मुझे लगता है कि यह स्पष्ट नहीं है (कम से कम मेरे लिए नहीं) कि यह व्यवहार में कैसे होना चाहिए। इस समय के दौरान मैंने यह gist.github.com/maximveksler/5b4f80c5ded20237c3deebc82a31dcd5 किया है और यह काम करने लगता है (वेब ​​पैक अलर्ट यदि यह फ़ॉन्ट फ़ाइल नहीं ढूँढ सकता है) तो मुझे यकीन है कि यह इष्टतम समाधान और उदाहरण नहीं है। या यहाँ दस्तावेज होने से मदद मिलेगी। बाहर तक पहुँचने के लिए ty!
— मैक्सिम वीक्स्लर
2
मैनें उत्तर दिया। आपका दृष्टिकोण मेरे लिए गलत लगता है: %PUBLIC_URL%CSS फ़ाइल में काम नहीं कर सकता (और अनावश्यक है)। इसके अलावा, जैसा कि गाइड में वर्णित है, आपको सार्वजनिक फ़ोल्डर नहीं, लगभग सभी मामलों में जेएस आयात का उपयोग करना चाहिए।
— दान अब्रामोव
फोंट के लिए निर्दिष्ट फ़ोल्डर को स्कैन करने और सभी फ़ॉन्ट विविधताओं के साथ स्क्रिप्ट फ़ाइल उत्पन्न करने के लिए क्या कोई उपयोगिता / पैकेज है? यह लिखने के लिए थकाऊ है कि सभी मैन्युअल रूप से
— helloworld

जवाबों:

291

दो विकल्प हैं:

आयात का उपयोग करना

यह सुझाया गया विकल्प है। यह सुनिश्चित करता है कि आपके फोंट बिल्ड पाइपलाइन के माध्यम से चलते हैं, संकलन के दौरान हैश हो जाते हैं ताकि ब्राउज़र कैशिंग सही ढंग से काम करे, और यदि फ़ाइलें अनुपलब्ध हैं तो आपको संकलन त्रुटियां मिलती हैं।

जैसा कि "इमेजेज, फॉन्ट्स और फाइल्स को जोड़ना" में वर्णित है , आपको जेएस से आयातित सीएसएस फाइल की जरूरत है। उदाहरण के लिए, डिफ़ॉल्ट src/index.jsआयातों द्वारा src/index.css:

import './index.css';

इस तरह एक CSS फ़ाइल बिल्ड पाइपलाइन के माध्यम से जाती है, और फोंट और छवियों को संदर्भित कर सकती है। उदाहरण के लिए, यदि आप एक फ़ॉन्ट डालते हैं, तो src/fonts/MyFont.woffआपका index.cssयह शामिल हो सकता है:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

ध्यान दें कि हम एक सापेक्ष पथ का उपयोग कैसे कर रहे हैं ./। यह एक विशेष संकेतन है जो बिल्ड पाइपलाइन (वेबपैक द्वारा संचालित) को इस फाइल को खोजने में मदद करता है।

आम तौर पर यह पर्याप्त होना चाहिए।

publicफोल्डर का उपयोग करना

यदि किसी कारण से आप बिल्ड पाइपलाइन का उपयोग नहीं करना पसंद करते हैं , और इसके बजाय "क्लासिक तरीका" करते हैं, तो आप फ़ोल्डर का उपयोगpublic कर सकते हैं और वहां अपने फोंट लगा सकते हैं।

इस दृष्टिकोण का नकारात्मक पक्ष यह है कि जब आप उत्पादन के लिए संकलित करते हैं तो फ़ाइलें हैश नहीं होती हैं, इसलिए आपको उनके नामों को हर बार जब आप उन्हें बदलते हैं, या ब्राउज़र को पुराने संस्करणों को कैश करना होगा।

यदि आप इसे इस तरह से करना चाहते हैं, तो फोंट को publicफ़ोल्डर में कहीं रख दें , उदाहरण के लिए, में public/fonts/MyFont.woff। यदि आप इस दृष्टिकोण का अनुसरण करते हैं, तो आपको सीएसएस फ़ाइलों को publicफ़ोल्डर में रखना चाहिए और उन्हें जेएस से आयात नहीं करना चाहिए क्योंकि इन दृष्टिकोणों को मिलाना बहुत ही भ्रमित करने वाला है। इसलिए, यदि आप अभी भी इसे करना चाहते हैं, तो आपके पास एक फ़ाइल होगी public/index.css। आपको <link>इस स्टाइलशीट से मैन्युअल रूप से जोड़ना होगा public/index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

और इसके अंदर, आप नियमित CSS नोटेशन का उपयोग करेंगे:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

ध्यान दें कि मैं fonts/MyFont.woffपथ के रूप में कैसे उपयोग कर रहा हूं । ऐसा इसलिए है क्योंकि यह फ़ोल्डर index.cssमें है, publicइसलिए इसे सार्वजनिक पथ से परोसा जाएगा (आमतौर पर यह सर्वर रूट होता है, लेकिन यदि आप GitHub पेज पर आते हैं और अपने homepageफ़ील्ड को http://myuser.github.io/myprojectइसमें सेट करते हैं , तो यह सेवा की जाएगी /myproject)। हालांकि fontsमें भी हैं publicफ़ोल्डर, इसलिए वे से परोसा जाएगा fontsअपेक्षाकृत (या तो http://mywebsite.com/fontsया http://myuser.github.io/myproject/fonts)। इसलिए हम सापेक्ष पथ का उपयोग करते हैं।

ध्यान दें कि जब से हम इस उदाहरण में बिल्ड पाइपलाइन से बच रहे हैं, यह सत्यापित नहीं करता है कि फ़ाइल वास्तव में मौजूद है। यही कारण है कि मैं इस दृष्टिकोण की सिफारिश नहीं करता हूं। एक और समस्या यह है कि हमारी index.cssफ़ाइल को छोटा नहीं किया जाता है और हैश नहीं मिलता है। तो यह अंत उपयोगकर्ताओं के लिए धीमा होने जा रहा है, और आप फ़ाइल के पुराने संस्करणों को कैशिंग करने वाले ब्राउज़र को जोखिम में डालते हैं।

 किस तरीके का उपयोग करें?

पहली विधि के साथ जाओ ("आयात का उपयोग करना")। मैंने केवल दूसरे का वर्णन किया है क्योंकि आपने ऐसा करने का प्रयास किया है (आपकी टिप्पणी को देखते हुए), लेकिन इसमें कई समस्याएं हैं और केवल अंतिम उपाय होना चाहिए जब आप किसी मुद्दे पर काम कर रहे हों।

— दान अब्रामोव
स्रोत
5
डॉक्स में एक उदाहरण उपयोगी होगा, मैं भी थोड़ा उलझन में था
— टॉम
2
मैंने पाया कि मुझे वास्तव में url का उपयोग करना था ।/fonts/Myfont.woff और नहीं ।/Myfont.woff
— th3morg
57
यदि कोई ttfफ़ॉन्ट जोड़ रहा है , तो आपको पैरामीटर के truetypeबजाय * को देना चाहिए । ttfformat
— दूधसरक
3
@milkersarac तुम सबसे अच्छे हो!
— जोहो विलाका
19
@Milkersarac के बाद यदि आप उपयोग otfकर रहे हैं तो आपको लगाना होगा opentype।
— कार्ल टेलर
46

यह करने के कुछ तरीके इस प्रकार हैं:

1. आयात करने वाला फ़ॉन्ट

उदाहरण के लिए, रोबोटो का उपयोग करने के लिए, पैकेज का उपयोग करके स्थापित करें

yarn add typeface-roboto

या

npm install typeface-roboto --save

Index.js में:

import "typeface-roboto";

बहुत सारे ओपन सोर्स फोंट और अधिकांश Google फोंट के लिए npm पैकेज हैं। आप यहां सभी फॉन्ट देख सकते हैं । सभी पैकेज उस प्रोजेक्ट के हैं ।

2. थर्ड पार्टी द्वारा होस्ट किए गए फॉन्ट के लिए

उदाहरण के लिए Google फोंट, आप Fonts.google.com पर जा सकते हैं, जहाँ आपको ऐसे लिंक मिल सकते हैं जिन्हें आप अपने पास रख सकते हैंpublic/index.html

फोंट का स्क्रीनशॉट .google.com

यह जैसा होगा

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

या 

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3. फ़ॉन्ट डाउनलोड करना और इसे अपने स्रोत कोड में जोड़ना।

फ़ॉन्ट डाउनलोड करें। उदाहरण के लिए, Google फोंट के लिए, आप Fonts.google.com पर जा सकते हैं । फ़ॉन्ट डाउनलोड करने के लिए डाउनलोड बटन पर क्लिक करें।

fontsअपनी srcनिर्देशिका में फ़ॉन्ट को निर्देशिका में ले जाएं

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

अब, इसमें App.css, इसे जोड़ें

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

के लिए ttfप्रारूप, आप उल्लेख किया हैformat('truetype') । के लिए woff,format('woff')

अब आप कक्षाओं में फ़ॉन्ट का उपयोग कर सकते हैं।

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. वेब-फॉन्ट-लोडर पैकेज का उपयोग करना

पैकेज का उपयोग कर स्थापित करें

yarn add webfontloader

या

npm install webfontloader --save

इसमें src/index.js, आप इसे आयात कर सकते हैं और आवश्यक फोंट निर्दिष्ट कर सकते हैं

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});
— सुंडो बंगबंग
स्रोत
2
— save npm
@Natalie टिप्पणी के लिए धन्यवाद, मुझे खुशी है कि npm ने यह परिवर्तन किया।
— सूडो बैंगबैंग
@sudobangbang धन्यवाद, समाधान # 3 ने मेरे लिए काम किया। हालाँकि - वहाँ एक तरीका है के fontsतहत फ़ोल्डर नहीं है src, लेकिन publicइसके बजाय के तहत ? मैंने इसे आजमाया, लेकिन ऐसा लगता है कि इसकी अनुमति नहीं है ...
— योसी वेनतेतिन
@YossiVainshtein, मुझे ऐसा नहीं लगता। जैसा कि आप App.css में फोंट का उपयोग कर रहे हैं, यह भी इसके साथ संकलित किया जाना चाहिए।
— सूडो बैंगबैंग
For ttf format, you have to mention format('truetype'). For woff, format('woff')मेरे लिए यह किया! धन्यवाद!
— जोसेफ ब्रिग्स
7
  1. Google फ़ॉन्ट्स https://fonts.google.com/ पर जाएं
  2. नीचे दी गई छवि के अनुसार अपने फ़ॉन्ट का चयन करें:

यहां छवि विवरण दर्ज करें

  1. कॉपी करें और फिर उस टैब को नए टैब में पेस्ट करें, आपको उस फ़ॉन्ट को जोड़ने के लिए सीएसएस कोड मिलेगा। इस मामले में अगर आप

https://fonts.googleapis.com/css?family=Spicy+Rice

यह इस तरह खुलेगा:

यहां छवि विवरण दर्ज करें

4, उस कोड को अपनी शैली में कॉपी और पेस्ट करें। और बस इस तरह से उस फ़ॉन्ट का उपयोग करना शुरू करें:

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

परिणाम:

यहां छवि विवरण दर्ज करें

— हितेश साहू
स्रोत
1
कई मामलों में (पूर्व: कॉर्पोरेट नेटवर्क), बाहरी सीडीएन तक पहुंच फ़ायरवॉल और इस विधि द्वारा अवरुद्ध है, हालांकि सही, काम नहीं कर सकता है। हमारे संगठन में कई वीएलएएन हैं और आईटी और कुछ अन्य को छोड़कर सभी वीएलएएन बाहरी सीडीएन पहुंच को रोकते हैं जिसका अर्थ है कि Google की सामग्री सीडीएन भी अवरुद्ध है। वहाँ किया गया था कि।
— अंबिसव
2

आप WebFont मॉड्यूल का उपयोग कर सकते हैं , जो प्रक्रिया को बहुत सरल करता है।

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}
— Delfino
स्रोत
0

मैं इस तरह की गलतियाँ कर रहा था।

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

यह इस तरह से ठीक से काम करता है

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
— यासीन उयसल
स्रोत
0

मैंने पूरी सुबह इस स्टैक प्रश्न पर उतरने के बाद एक समान समस्या को हल करने में बिताई। मैंने ऊपर दिए गए उत्तर में जंप ऑफ पॉइंट के रूप में डैन के पहले समाधान का उपयोग किया।

संकट

मेरे पास एक देव है (यह मेरी स्थानीय मशीन पर है), मंचन, और उत्पादन का वातावरण। मेरे मंचन और उत्पादन वातावरण एक ही सर्वर पर रहते हैं।

एप्लिकेशन के माध्यम से मंचन करने के लिए तैनात किया गया है acmeserver/~staging/note-taking-appऔर उत्पादन संस्करण पर रहता हैacmeserver/note-taking-app (आईटी दोष) रहता है।

फॉन्ट जैसी सभी मीडिया फाइलें देव पर पूरी तरह से लोड हो रही थीं (यानी, react-scripts start ) ।

हालाँकि, जब मैंने स्टेजिंग और प्रोडक्शन बिल्ड बनाया और अपलोड किया, जबकि फाइल .cssऔर .jsफाइलें ठीक से लोड हो रही थीं, तो फोंट नहीं थे। संकलित .cssफ़ाइल में एक सही पथ दिखाई देता था, लेकिन ब्राउज़र http अनुरोध में कुछ बहुत ही गलत पथांकन (नीचे दिखाया गया है) हो रहा था।

संकलित main.fc70b10f.chunk.cssफ़ाइल:

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

ब्राउज़र http अनुरोध नीचे दिखाया गया है। ध्यान दें कि /static/css/जब फ़ॉन्ट फ़ाइल बस /static/media/गंतव्य फ़ोल्डर को डुप्लिकेट करने के साथ-साथ रहती है तो यह कैसे जोड़ रहा है । मैंने दोषी होने वाले सर्वर कॉन्फिगर को खारिज कर दिया।

Refererआंशिक रूप से गलती भी है।

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

package.jsonफ़ाइल था homepageकरने के लिए संपत्ति सेट ./note-taking-app। इस कारण समस्या हो रही थी।

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

उपाय

यह लंबे समय से घुमावदार था - लेकिन समाधान यह है:

  1. PUBLIC_URLपर्यावरण के आधार पर एनवी चर को बदलें
  2. फ़ाइल homepageसे संपत्ति निकालेंpackage.json

नीचे मेरी .env-cmdrcफाइल है। मैं .env-cmdrcनियमित रूप से उपयोग करता हूं .envक्योंकि यह एक फाइल में सब कुछ एक साथ रखता है।

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

रूटिंग के माध्यम से react-router-domभी ठीक काम करता है - बस संपत्ति के PUBLIC_URLरूप में एनवी चर का उपयोग करें basename।

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

सर्वर कॉन्फ़िगरेशन ./index.htmlफ़ाइल के सभी अनुरोधों को रूट करने के लिए सेट किया गया है।

अंत में, यहां वही है जो संकलित main.fc70b10f.chunk.cssफ़ाइल की तरह लगता है कि चर्चा में बदलाव लागू होने के बाद।

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

पठन सामग्री

  • https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

  • https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

  • https://create-react-app.dev/docs/advanced-configuration

    • यह PUBLIC_URLपर्यावरण चर की व्याख्या करता है

      रिएक्ट ऐप बनाएं मान लें कि आपका एप्लिकेशन सर्विंग वेब सर्वर के रूट या सबपैथ में पैकेज.जॉन (होमपेज) में निर्दिष्ट है। आम तौर पर, Create React App होस्टनाम को अनदेखा करता है। आप इस चर का उपयोग आपके द्वारा प्रदान की जाने वाली यूआरएल (होस्टनाम शामिल) को वर्बेटिम को संदर्भित करने के लिए परिसंपत्तियों को मजबूर करने के लिए कर सकते हैं। आपके एप्लिकेशन को होस्ट करने के लिए CDN का उपयोग करते समय यह विशेष रूप से उपयोगी हो सकता है।

— Puiu
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.