VueJS का उपयोग करके बनाए गए एक मूल वेब ऐप में एक एपीआई को कॉल किया जाता है जो पर्यावरण नाम वाले ऑब्जेक्ट के साथ प्रतिक्रिया करता है। उदाहरण के लिए:
https://appsdev/mysimpleapp/api/environment
रिटर्न
{"applicationName":"My Simple App","version":"1.0.0.0","environment":"DEV"}

वर्तमान में, यदि परिवेश DEV है, तो सशर्त रूप से दिखाने के लिए एक नेविगेशन बटन सेट किया गया है। यहाँ उस पृष्ठ के प्रासंगिक भाग हैं:

<template>
   <!-- other content here -->
   <div @click="updateMenu()" v-show="['DEV'].includes(environment)"><router-link :to="{name: 'dev-notes'}">Dev Notes</router-link></div>
</template>

<script>
// other logic here
data() {
    return {
        environment: null
    }
},
created() {
    this.getEnvironment();
},
methods: {
    async getEnvironment() {
        const environmentDetails = await this.$service.access('environment').get();  // uses Axios to access API
            this.environment = environmentDetails.environment;
        }
    }
}
</script>

जबकि यह दृष्टिकोण काम करता है, ऐप के एपीआई को हिट करते समय दिखाई देने वाले "देव नोट्स" एनएवी बटन में ध्यान देने योग्य देरी होती है। साथ ही, हर बार पेज लोड होने पर, एपीआई को एक कॉल आती है।

इस पर सुधार करने के लिए, ऐसा लगता है कि एपीआई को एक बार हिट करना बेहतर हो सकता है, जब ऐप शुरू होता है, तो उस मान को एक चर में कहीं स्टोर करें और फिर उस चर को सशर्त रूप से "देव नोट्स" एनएवी बटन दिखाने के लिए देखें। Vuex इतनी सरल चीज़ के लिए ओवरकिल जैसा लगता है और इस ऐप में .env फ़ाइलें नहीं हैं जो यह पोस्ट बताती है कि इसे कैसे हासिल किया जा सकता है?

2
knot22 14 जिंदा 2021, 22:57

1 उत्तर

सबसे बढ़िया उत्तर

आप नोड के process.env का उपयोग करके सीधे Vue CLI से पर्यावरण मोड की जानकारी तक पहुंच सकते हैं, जो एक ऐसी सुविधा है जो डिफ़ॉल्ट रूप से उपलब्ध है। विशेष रूप से, process.env.NODE_ENV बताता है कि ऐप उत्पादन या विकास या किसी अन्य मोड में चल रहा है या नहीं। Vue CLI docs से:

उदाहरण के लिए, NODE_ENV को प्रोडक्शन मोड में "प्रोडक्शन" पर, टेस्ट मोड में "टेस्ट" पर और डिफॉल्ट को "डेवलपमेंट" पर सेट किया जाएगा।

आप अपने प्रोजेक्ट में कहीं भी इसका परीक्षण कर सकते हैं, उदाहरण के लिए:

if (process.env.NODE_ENV === 'production') {
  console.log('PRODUCTION');
} else if (process.env.NODE_ENV === 'development') {
  console.log('DEVELOPMENT');
} else {
  console.log('OTHER');
}
2
Dan 14 जिंदा 2021, 23:19